发布时间：2023-05-02 文章分类：WEB开发, 电脑百科投稿人：王小丽字号：默认 | 大 | 超大打印

component lists rendered with v-for should have explicit keys

发现问题

关键报错

(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

具体原因解释

用v-for渲染的组件列表应该有显式的键

具体代码

  <el-timeline-item :timestamp="blog.created" placement="bottom" color="rgb" icon="el-icon-s-comment"
                          v-for="blog in blogs">
          <el-card>
              .....

解决问题

参考官网

https://cn.vuejs.org/v2/guide/list.html#%E7%94%A8-v-for-%E6%8A%8A%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E5%AF%B9%E5%BA%94%E4%B8%BA%E4%B8%80%E7%BB%84%E5%85%83%E7%B4%A0

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

我之前记录过关于v-for为什么指定key的笔记,具体参考:

https://blog.csdn.net/shaoming314/article/details/122227724

解决

修改后的代码

  <el-timeline-item :timestamp="blog.created" placement="bottom" color="rgb" icon="el-icon-s-comment"
                          v-for="blog in blogs" :key="blog.id">
          <el-card>
              ....

总结

  <el-card>
          ....


## 总结
`vue.js 使用 v-for 一定要指定 key`

标签 key, Red, xp