vue的 v-for指令报“custom elements in iteration require v-bind:key“错误

以你之姓@ 2022-09-03 13:17 138阅读 0赞

文章目录

  • 1、问题描述
  • 2、解决方案:

1、问题描述

今天再用v-for指令进行遍历的时候出现custom elements in iteration require v-bind:key错误。

2、解决方案:

为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为列表的每一项提供一个唯一key属性。key属性的类型只能是stringnumber
例如我修改之后的代码如下:

  1. <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog.id">
  2. <el-card>
  3. <h4>
  4. <router-link :to="{name:'BlogDetail',params:{blogId:blog.id}}">
  5. {
  6. {blog.title}}
  7. </router-link>
  8. </h4>
  9. <p>{
  10. {blog.description}}</p>
  11. </el-card>
  12. </el-timeline-item>

注意最后面的:key=“blog.id”,

最终成功实现的博客列表的遍历效果如下所示:
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,138人围观)

还没有评论,来说两句吧...

相关阅读