vue的 v-for指令报“custom elements in iteration require v-bind:key“错误
【摘要】 @[toc] 1、问题描述今天再用v-for指令进行遍历的时候出现custom elements in iteration require v-bind:key错误。 2、解决方案:为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为列表的每一项提供一个唯一key属性。key属性的类型只能是string或number。例如我修改之后的代码如下: <el-tim...
@[toc]
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”,
最终成功实现的博客列表的遍历效果如下所示:
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)