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

文章目录

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

1、问题描述

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

2、解决方案：

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

 <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog.id">
          <el-card>
            <h4>
              <router-link :to="{name:'BlogDetail',params:{blogId:blog.id}}">
                {{blog.title}}
              </router-link>
            </h4>
            <p>{{blog.description}}</p>
          </el-card>
 </el-timeline-item>

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

最终成功实现的博客列表的遍历效果如下所示：