Vue提示Custom elements in iteration require 'v-bind:key'

Vue中使用v-for出现错误提示:
[vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue

解决思路:
1、v-for 后添加:key="item"标识

<div class="left" v-for="item in adviceArrs" :key="item.id"></div>
<div class="right" v-for="i in adviceArrs" :key="i"></div>

作用:--摘抄vue官网
①"为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。"
②“不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。”

如果你这样写:

<div class="left" v-for="item in adviceArrs" :key="item"></div>

是会报错的:
Avoid using non-primitive value as key, use string/number value instead.

避免使用非原始值作为key,最好使用字符串或数值类型代替。

2、关闭Eslint等语法检测插件

vue中使用v-for渲染数据为何需要加key?

避免使用非原始值作为key,最好使用字符串或数值类型代替。

2、关闭Eslint等语法检测插件

vue中使用v-for渲染数据为何需要加key?

 

作者:前端葱叶
链接:https://www.jianshu.com/p/525471f0c32a
来源:简书
 
posted @   烧机  阅读(801)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示