[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

已于 2022-05-06 22:04:59 修改
阅读量9.2k 收藏 4
点赞数 7
分类专栏： 我爱bug 呜呜呜 文章标签： 前端
于 2022-05-06 21:43:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57396733/article/details/124618580
版权
本文探讨了一位开发者在Vue应用中遇到的一个关于key值的问题。原本尝试用item.id作为key，但由于误写成newDate()，导致数据类型不匹配，引发了Vuewarn警告。错误在于key值应为唯一且最好是字符串或数字，而非对象。修复后，作者意识到key值可以是number或string，但不应是复杂类型。通过这个错误，作者深化了对Vue中key属性的理解，并强调错误是学习过程的一部分。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.场景展示

2.分析

原本以为只是简单的子传父，子把输入的内容，传给父亲，新增到list数组中

实际却出现了奇怪的问题

功能确实是正常实现了，但却出现了如下报错信息

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

大致意思为：避免使用非原语值作为键，而使用字符串/数字值

3.出错地方

 我们仔细揣摩这几处

我将item.id作为key值，由于key得为唯一值，为了保证后续新增的item.id是唯一的，准备在此巧妙的使用了时间戳(然而实际上误写为了 new Date())。由于误写，造成了一些列错误。

原有的三条数据，item.id是number类型，然而误写的new Date()并不是number类型，而是object。新增的item.id与原有的item.id数据类型不同。

4.进一步思考

原key值是number类型，我新增一个key是string类型，会报错吗？

 

 不会报错，原key值为number类型，新增的key可以是string类型，但不能是数组，对象等复杂类型数据

 

之后改成时间戳就对了

 总结：虽然因为低级失误导致错误，但从这个错误中分析出了原本不曾考虑过的问题，对key的理解也加深了。错误并不可怕。还是那句话，我爱bug，呜呜呜

vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
前端程序员、项目经理、人工智能博主
12-04 860
控制台报错 报错原因说v-for 循环的key值重复了，那就看看自己写的代码 报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去 改正后的代码 报错解决，大功告成
Uni-app篇 vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
独树一枝
01-04 416
vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead. 错误： 这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了 key值是必须唯一的，如果重复就会报错 可以把key值改为index或者id，就可以避免这个情况（这里key最好用id，才能达到key值唯一，就地复用的原则，大大节省了dom的渲染） ...
Vue报错：Avoid using non-primitive value as key, use string/number value instead
qq_38261819的博客
10-17 8794
报错的意思是 不要用对象或是数组作为key，用string或value作为key。意思是：避免使用非基本值作为键，而是使用字符串/数字值。
Vue渲染时报错main.js:20 [Vue warn]: Avoid using non-primitive value as key, use string/number value inste
最新发布
2401_83213163的博客
04-21 377
一般后端返回数据会带有唯一的id值，可以将id绑定在key中；如果没有key的话也可以使用index，但是可能会导致渲染问题（不推荐）观察common-aside这个组件可知key值出现了重复，key值是必须唯一的，此时只需更改key值就可以解决报错。Vue一运行时就发现控制台出现如下报错。循环里，key值出现了重复。
报错处理：Avoid using non-primitive value as key, use string/number value instead
热门推荐
Devin_Chen的博客
04-29 8万+
项目运行报错 Avoid using non-primitive value as key, use string/number value instead. 意思是：避免使用非基本值作为键，而是使用字符串/数字值。 Duplicate keys detected: '[object Object]'. This may cause an update error. 意思是：检测到重复键:...
VUE项目中报错：Avoid using non-primitive value as key, use string/number value instead.
一些平时在开发过程中遇到的常见问题，分享给大家
09-25 1013
VUE项目中报错：Avoid using non-primitive value as key, use string/number value instead.
[vue warn]: avoid using non-primitive value as key, use string/number value instead.
08-27
Vue中的“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告的意思是在使用Vue的v-for指令时，应该使用基本类型（即字符串或数字）作为循环中的元素的key。 在Vue中，...
vue.runtime.esm.js:4605 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
06-14
This warning message is usually triggered when you use a non-primitive value (such as an object or an array) as a key in a Vue.js template. Vue.js recommends that you use string or number values as ...
解决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相当于是索引...
Avoid using non-primitive value as key, use string/number value instead.
悟世君子的博客
12-16 2624
vue 项目使用 v-for渲染时报错：Avoid using non-primitive value as key, use string/number value instead. 报错原因：避免使用非基本值作为键，而是使用字符串/数字值；即不要用对象或是数组作为 key，用 string 或 number 作为 key 报错代码 当 item为对象时，就会出现这种报错，将其改...
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead.
weixin_42354661的博客
07-31 632
同一个错误：[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.v-for 遍历 ：key = obj :key 给了一个obj对象 ，改为字符串或数字即。译：检测到重复键:'[object object]'。这可能会导致更新错误。译：避免使用非基本值作为键，而是使用字符串/数字值。
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead. 不要使用index作为键
szwwwx的博客
09-10 457
报错的大概意思是：作为 子级的列表元素 不要使用index作为键，否则就跟没有设置键一样。父组件传递数组给子组件 在子组件遍历改数组时， 可以为其他的字符串或数字。那么修改key就可以解决。于是修改：:key=“item.id”vue项目中报错：Avoid using non-primitive value as key, use string/number value instead.
解决报错Avoid using non-primitive value as key, use string/number value instead.
温温的博客
07-26 1443
3] 这个错误通常是由于在v-for循环中的:key赋值问题导致的，解决方法是使用合适的字符串或数字作为:key的值。[1] 这个错误通常出现在使用中的进行循环遍历值时。这个错误信息的意思是要避免使用非基本值作为键，而是使用字符串/数字值代替。[2] 这个错误的解决方案是检查是否有重复的键值，并确保使用字符串或数字作为键值。我这边报错的原因是两个键值写的一样。
vue: Avoid using non-primitive value as key, use string/number value instead.
qq_41687299的博客
01-05 276
问题： 如下：
vue 报错 Avoid using non-primitive value as key, use string/number value instead.
coldriversnow的专栏
03-10 3758
报错内容如下： [Vue warn]：避免使用非原语值作为键，而是使用字符串/数字值。 [Vue warn]：检测到重复的键：“[object]”。这可能会导致更新错误。 错误代码是： 这里的key 少写个id item对象中有一个唯一值：d.id ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值