vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.

已于 2023-10-10 17:58:24 修改
阅读量10w+ 收藏 23
点赞数 42
分类专栏： vue vue学习 vue学习 文章标签： vue
于 2018-11-16 16:08:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lily2016n/article/details/84141054
版权
vue 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
vue学习
15 篇文章 0 订阅
订阅专栏
vue学习
14 篇文章 2 订阅
订阅专栏

一进页面就报错如下

在这里插入图片描述

一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了
在这里插入图片描述

key值是必须唯一的，如果重复就会报错
可以把key值改为index或者id，就可以避免这个情况（这里key最好用id，才能达到key值唯一，就地复用的原则，大大节省了dom的渲染）
在这里插入图片描述

lily2016n
关注
  • 42
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
vue-introjs-与vue.js http://introjs.com/集成了intro.js分步指南和功能介绍。-Vue.js开发
05-27
vue-introjs Vue的intro.js绑定。 安装添加软件包yarn添加vue-introjs＃或通过npm：npm i vue-introjs安装插件导入VueIntro和Vue的vue-introjs intro.js绑定。 安装添加软件包yarn添加vue-introjs＃或通过npm：npm i...
解决webpack4+升级webpack5+ vue-pdf不可用问题
06-09
ERROR in ./node_modules/vue-pdf/node_modules/pdfjs-dist/es5/build/pdf.worker.js (./node_modules/vue-pdf/node_modules/worker-loader/dist/cjs.js!./node_modules/vue-pdf/node_modules/pdfjs-dist/es5/build/...
【CSCODE-VUE】Avoid using non-primitive value as key, use string/number value instead.
少莫千华
04-25 756
问题描述 vue.runtime.esm.js:619 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. found in ---> <Index> at src/views/setting/clientmanage/index.vue 5vue.r...
Vue Avoid using non-primitive value as key, use string/number value instead.
代码小疯子
09-18 770
在使用 for 循环时，不要用对象或是数组作为key，用string或value作为key，逐一排查页面中 使用到 for 设置 key 地方，修改后解决问题。
[Violation]Avoid using document.write().
最新发布
2301_79698214的博客
05-30 406
方法最初是用于在文档流中直接写入字符串。但是，由于它会重写整个文档流，因此在现代的前端开发中，通常建议避免使用它，因为它可能会导致性能问题，并且容易破坏页面的现有内容。，它将清除页面内容并开始写入新内容。在这种情况下，使用上述方法更加有效和推荐。如果你需要动态地向页面中插入内容，你可以使用以下方法来替代。事件发生之后，这样可以保证在页面加载完成后执行。方法创建元素并将它们添加到文档中的适当位置。仅在你完全控制页面的情况下，并且在。请注意，如果你在页面已完全加载后使用。这个报错表示应当避免使用。
解决Avoid using non-primitive value as key, use string/number value instead.
阿水的博客
04-06 2528
解决Avoid using non-primitive value as key, use string/number value instead.
【Vue控制台报红】[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
m0_51046603的博客
10-20 395
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.的意思是： 避免使用非基元值作为键，而应改用字符串/数字值。
Vue项目提示Avoid using non-primitive value as key, use string/number value instead的报错
baidu_33164415的博客
01-23 1160
Vue项目提示Avoid using non-primitive value as key, use string/number value instead的报错
解决vue v-for 遍历循环时key值报错的问题
12-01
[Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key，用string或number作为key。 :key相当于是索引...
深入浅析Vue.js 中的 v-for 列表渲染指令
10-17
当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。这篇文章主要介绍了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以参考下
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
10-16
主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下
Avoid using non-primitive value as key, use string/number value instead.
九
06-29 2022
源错误代码： 出错不慌，首先要确定出错点，然后知道它是什么意思才能知道往哪个方向调错 翻译： 第一个：避免使用非基本值作为键，而是使用字符串/数字值。 第二个：检测到重复键:'[object object]'。这可能会导致更新错误。 发现出错的位置是一样的，可以推测是由一个原因导致的，既然人家不让用非基本值做为键那咱就不用呗 修改： 完工！！！ ...
Avoid using non-primitive value as key, use string/number value instead.Duplicate keys detected: '[o
weixin_39520967的博客
02-11 524
今天在使用ant-design-vue时出现警告： 具体的问题就是有重复的键，可能会导致更新错误。 经过查找，发现报警告的的地方是 由于在v-for循环中，key值可能会出现重复，所以报了重复键警告。 解决：将key变成唯一的就行 ...
关于报错[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
qq_42119742的博客
07-16 291
报错提示： 这个报错 是在v-for循环的时候 绑定的key重复了 要保证key是唯一的 要这么写 就不会报错了 <div v-for="(item,index) in itemList" :key="index" class="organizer-item">
vue报错信息（Avoid using non-primitive value as key, use string/number value instead.）
热门推荐
sou_vyp的博客
08-02 3万+
避免使用非原始值作为关键字，而使用字符串/数字值代替。 解决方法： for循环中，绑定的key值不能为对象，而是取一个字符串或数值，如下图：
VUE 页面渲染成功，但control中报错
06-06 1014
这个问题一般是json数据是由后台请求提供，但在页面加载的时候，还没有这个对象。解决办法有几个，各有优缺点：1.一般在mounted方法中获取数据的，采用同步，等数据拿到后，再加载页面，可以防止报错，页面出现脚本{{XXX}}等。缺点是：数据大会影响页面加载的速度。2.一般报错都是对data项，动态新增属性，可以这样定义，如下图，防止出现undefined.属性的情况出现，就不会报错了。缺点是：每...
Vue | using non-primitive value as key, use string/number value instead.
u011607490的博客
10-08 843
&lt;div v-for="item in items" :key="item"&gt; 我这里的items是一个对象，item也是一个对象， 这个报错意思就是，key中的变量必须是字符串或者是数字类型， 解决办法，在item后随便添加个属性 比如： &lt;div v-for="item in items" :key="item.string"...
vue el-table 渲染报错Avoid using non-primitive value as key, use string/number value instead.
lxwy_wxl的博客
03-06 623
项目中想给el-table添加单元格点击事件，对表格数据进行遍历改变对象的值为对象类型时，表格渲染报错。 表格数据如下： 对表格数据遍历如下 问题1，2如下图圈出 把el-table里的row-key改为id.value v-model改为scope.row.data.value 这个报错信息我至少寻找的2小时，网上找的答案大多都是讲是v-for里的key出现了问题，我排查了v-for的key值没有问题之后，根据一些经验找到了这两个问题，记录一下。 ...
[vue warn]: avoid using non-primitive value as key, use string/number value instead.
08-27
### 回答1： 这是Vue的警告信息，意思是在使用v-for指令时，不要使用非原始值作为key，而应该使用字符串或数字值作为key。这是因为Vue在渲染列表时需要使用key来跟踪每个元素的身份，如果使用非原始值作为key，可能会导致渲染错误或性能问题。因此，建议在使用v-for指令时，始终使用字符串或数字值作为key。 ### 回答2： Vue中的“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告的意思是在使用Vue的v-for指令时，应该使用基本类型（即字符串或数字）作为循环中的元素的key。 在Vue中，当使用v-for指令迭代一个数组或对象时，需要为每个迭代的元素指定一个唯一的key属性。这样Vue才能正确地跟踪每个元素的变化并进行优化。 然而，警告指出v-for指令的key属性不应该是一个非基本类型的值，例如一个对象。这是因为对象是引用类型，而在JavaScript中，当比较两个不同的对象时，它们是不相等的，即使它们具有相同的属性和值。因此，Vue无法正确地比较和跟踪对象的变化，从而导致错误和不一致的结果。 解决这个问题的最佳方法是将非基本类型的值转换为字符串或数字，并使用它们作为key属性。通过将非基本类型的值转换为字符串或数字，Vue可以正确地比较和跟踪它们的变化。例如，如果使用一个对象的属性作为key属性，可以使用对象属性的字符串值作为key。 综上所述，“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告意味着在使用v-for指令时，应该将非基本类型的值转换为字符串或数字，并将它们作为key属性。通过这样做，可以避免错误和不一致的结果，并确保Vue正确地比较和跟踪元素的变化。 ### 回答3： 这个警告是来自Vue的，意思是应该避免使用非原始值作为key，而应该使用字符串或数字值作为key。在Vue中，当我们使用v-for指令循环渲染一个列表时，我们需要为每个列表项提供一个唯一的key值。这个key值可以是字符串或数字类型的，但不建议使用非原始值，比如对象或函数。 原因是Vue需要使用这个key值来进行性能优化和虚拟DOM的更新。如果我们使用了非原始值作为key，Vue会进行浅比较来判断是否需要更新DOM，而对于非原始值来说，浅比较可能会导致一些意外的问题。 因此，为了避免这种潜在问题，Vue建议我们使用字符串或数字类型的值作为key，因为它们可以保证唯一性，并且在进行比较时更加可靠。 解决这个警告的方法很简单，我们只需要将非原始值转换为字符串或数字即可。这可以通过将对象序列化为JSON字符串或使用对象的某个唯一属性作为key值来实现。 总结起来，当我们在Vue中使用v-for指令渲染列表时，要避免使用非原始值作为key，而应该使用字符串或数字类型的值作为key，以避免出现性能问题和意外的更新行为。
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值