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

最新推荐文章于 2025-04-21 23:09:48 发布
最新推荐文章于 2025-04-21 23:09:48 发布
阅读量824 收藏
点赞数 1
分类专栏： JavaScript错误处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43623808/article/details/103667723
版权

vue key值唯一不可重复，用index可以避免，改为:key=“index”

vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
前端程序员、项目经理、人工智能博主
12-04 863
控制台报错 报错原因说v-for 循环的key值重复了，那就看看自己写的代码 报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去 改正后的代码 报错解决，大功告成
Uni-app篇 vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
独树一枝
01-04 420
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渲染时报错main.js:20 [Vue warn]: Avoid using non-primitive value as key, use string/number value inste
最新发布
2401_83213163的博客
04-21 390
一般后端返回数据会带有唯一的id值，可以将id绑定在key中；如果没有key的话也可以使用index，但是可能会导致渲染问题（不推荐）观察common-aside这个组件可知key值出现了重复，key值是必须唯一的，此时只需更改key值就可以解决报错。Vue一运行时就发现控制台出现如下报错。循环里，key值出现了重复。
Vue报错：Avoid using non-primitive value as key, use string/number value instead
qq_38261819的博客
10-17 8802
报错的意思是 不要用对象或是数组作为key，用string或value作为key。意思是：避免使用非基本值作为键，而是使用字符串/数字值。
[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相当于是索引...
关于报错[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
qq_42119742的博客
07-16 348
报错提示： 这个报错 是在v-for循环的时候 绑定的key重复了 要保证key是唯一的 要这么写 就不会报错了 <div v-for="(item,index) in itemList" :key="index" class="organizer-item">
Avoid using non-primitive value as key, use string/number value instead.
九
06-29 2078
源错误代码： 出错不慌，首先要确定出错点，然后知道它是什么意思才能知道往哪个方向调错 翻译： 第一个：避免使用非基本值作为键，而是使用字符串/数字值。 第二个：检测到重复键:'[object object]'。这可能会导致更新错误。 发现出错的位置是一样的，可以推测是由一个原因导致的，既然人家不让用非基本值做为键那咱就不用呗 修改： 完工！！！ ...
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead. 不要使用index作为键
szwwwx的博客
09-10 460
报错的大概意思是：作为 子级的列表元素 不要使用index作为键，否则就跟没有设置键一样。父组件传递数组给子组件 在子组件遍历改数组时， 可以为其他的字符串或数字。那么修改key就可以解决。于是修改：:key=“item.id”vue项目中报错：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.
xiao___fang的博客
06-11 3817
在写vue项目的过程中打开网页在控制台会出现这样的错： 一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了。 key值是必须唯一的，如果重复就会报错，可以把key值改为p，就可以避免这个情况 ...
vue中出现Vue warn]: Avoid using non-primitive value as key, use string/number value instead.错误
qq_44175765的博客
04-11 408
一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。 改为：
vue渲染列表时报错[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
qq_44552416的博客
05-11 982
报错信息如下： 报错这个信息是因为，v-for循环里，key值重复导致。 检查代码发现的确如此 解决办法是：把key值改成index即可，因为key值必须是唯一的 如果对你有帮助，公众号搜索：前端早知道笔记 或扫描公众号二维码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值