[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞

Vue 报错：
[Vue warn]: <transition-group> children must be keyed: <ElTag>

 

question

If you need to bind the entire item object on el-select, but only display the name field, an error will be reported as shown in the title

<el-select
  v-model="dialogForm.placeInfo"
  value-key="id"
  multiple
  :multiple-limit="5"
  filterable
  reserve-keyword
>
  <el-option
    v-for="item in placeOptions"
    :label="`${item.name}（${item.applyPerson}）`"
    :key="item.id"
    :value="item"
  ></el-option>
</el-select>

Solution

The el-select tag adds a value-key attribute, and the value is the unique attribute value in the item, such as id