[Vue warn]: <transition-group> children must be keyed: <ElTag>
时间: 2024-03-09 17:44:27 浏览: 85
vue样式穿透 ::v-deep的具体使用
这个警告是由于在使用 Vue 的过渡组件 `<transition-group>` 时,其子元素需要有唯一的 key 属性。在这个具体的场景中,警告是由于在 `<transition-group>` 中使用了 `<ElTag>` 组件,并且没有为其指定 key 属性。
为了解决这个警告,你需要在 `<ElTag>` 组件上添加一个唯一的 key 属性。这个 key 可以是任何可以唯一标识该组件的值,比如组件的 ID、名称、索引等。例如,你可以这样修改代码:
```
<transition-group>
<el-tag v-for="(item, index) in tagList" :key="index">{{ item }}</el-tag>
</transition-group>
```
在这个例子中,我们为 `<el-tag>` 组件指定了一个唯一的 key 属性,即该组件在循环中的索引值 `index`。这样就可以避免 Vue 发出警告了。
阅读全文