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

别团等shy哥发育

发布于 2023-02-25 15:55:00

5260

发布于 2023-02-25 15:55:00

文章被收录于专栏：全栈开发那些事

文章目录

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

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

本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-08-07，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体同步曝光计划? ，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度

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

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

文章目录

1、问题描述

2、解决方案：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐