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

原创已于 2022-09-07 19:19:02 修改 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#vue.js #javascript #must be keyed #ElTag #select绑定item对象

于 2022-09-07 09:32:22 首次发布

Web FrontEnd 同时被 3 个专栏收录

226 篇文章

订阅专栏

Vue

55 篇文章

订阅专栏

Element UI

21 篇文章

订阅专栏

当在Vue应用中使用el-select组件，并尝试绑定整个item对象时，如果选项没有设置key，会导致Vue警告。解决方案是在el-select标签上添加value-key属性，确保每个选项都有唯一的标识符，例如item的id。这样可以避免报错并保证组件正确渲染。

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

问题

如果需要在 el-select 上面绑定整个 item 对象时，但是展示只显示 name 字段，会报如标题所示错误

<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>