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

最新推荐文章于 2024-09-25 01:43:14 发布
最新推荐文章于 2024-09-25 01:43:14 发布
阅读量472 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y521123y/article/details/104748167
版权

前两天写项目，用到了v-for渲染列表，一刷新页面，报错如下：
在这里插入图片描述
仔细一看代码，原来时自己粗心大意，key值重复了
在这里插入图片描述
key值必须是唯一的，如果重复就会报错。

爱吃的前端程序员
关注
专栏目录
vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
前端程序员、项目经理、人工智能博主
12-04 736
控制台报错 报错原因说v-for 循环的key值重复了，那就看看自己写的代码 报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去 改正后的代码 报错解决，大功告成
Uni-app篇 vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
独树一枝
01-04 339
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的渲染） ...
解决element-ui upload组件报错 Avoid using non-primitive value as key, use string/number value instead...
weixin_34348805的博客
07-18 459
到底是啥错呢，就是要求你的key必须是string或者number类型 那么解决就是找到这个报错的key（在node_modules/element-ui/lib/element-ui.common.js文件中），让他变成字符串也就是如图 +"" 当当当当！！！可以了，不报错了 ============================== 注意！，首先这个只是一个...
Avoid using non-primitive value as key, use string/number value instead.
青烟小生的博客
03-15 2400
在使用v-for的时候，控制台报错，Avoid using non-primitive value as key, use string/number value instead. 主要是原因是key用的不对， key是要唯一性的，所以应该用循环的数据里面唯一的来做，比如id,如下，我的i对应的是一个对象，所以，如果直接用:key="i",就会报错的，所以应该是:key="i.id" <div class="center" v-for="i in report" :key="i.id" style="
VUE项目中报错：Avoid using non-primitive value as key, use string/number value instead.
最新发布
一些平时在开发过程中遇到的常见问题，分享给大家
09-25 509
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.
qq_50276105的博客
10-15 1096
从服务器获取带对象的数组，通过遍历数组生成系列dom元素遍历数组的时候，当赋给的key值是一个对象的时候，会报错，并建议赋string或者number值。
vue报错信息：Avoid using non-primitive value as key, use string/number value instead.
06-06
这个错误通常出现在 Vue 的列表渲染中，是因为在使用非基本类型的数据作为 key 值时引起的。在 Vue 中，key 值用于帮助 Vue 高效地渲染列表，如果使用非基本类型的数据作为 key 值，Vue 会无法正确地判断列表项是否...
[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 warn]: Avoid using non-primitive value as key, use string/number value instead. found in ---> <FreeCard> at uni_modules/free-card/free-card.vue at pages/tabbar/index/index.vue 如何解决
07-10
这是因为Vue需要使用key来跟踪每个节点的身份，以便在重新渲染时提高性能。 要解决这个问题，你可以确保在v-for指令中使用字符串或数字作为key。例如，你可以使用item的唯一标识符作为key，或者使用索引作为key...
Vue报错：Avoid using non-primitive value as key, use string/number value instead
qq_38261819的博客
10-17 8417
报错的意思是 不要用对象或是数组作为key，用string或value作为key。意思是：避免使用非基本值作为键，而是使用字符串/数字值。
Vue循环问题Avoid using non-primitive value as key, use string/number value instead.
陌上人如玉，公子世无双
09-11 824
问题 解决： item值重复， 问题： 解决： 此处写了两个绑定，将v-model删掉即可
vue在v-for循环的时候，报错Avoid using non-primitive value as key, use string/number value instead.
从入门到放弃的博客
07-10 1075
错误原因：key值应该位string或者number，不应该使用对象等作为key值 解决方法：:key的存在相当于索引，可以提高循环的速度，当数据量不大的时候可以选择不使用key。这样也会存在问题VsCode会报错，因此可以考虑将对象中的string或者number属性作为key值。 ...
VUE渲染时报错 Avoid using non-primitive value as key, use string/number value instead.
Kaite_han的博客
10-13 1159
VUE渲染时报错 Avoid using non-primitive value as key, use string/number value instead. 进入页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了 当我们将key值设置为item.id属性时，问题就解决了。 ...
Vue Avoid using non-primitive value as key, use string/number value instead.
代码小疯子
09-18 830
在使用 for 循环时，不要用对象或是数组作为key，用string或value作为key，逐一排查页面中 使用到 for 设置 key 地方，修改后解决问题。
vue: Avoid using non-primitive value as key, use string/number value instead.
qq_41687299的博客
01-05 261
问题： 如下：
Avoid using non-primitive value as key, use string/number value instead.Duplicate keys detected: '[o
weixin_39520967的博客
02-11 561
今天在使用ant-design-vue时出现警告： 具体的问题就是有重复的键，可能会导致更新错误。 经过查找，发现报警告的的地方是 由于在v-for循环中，key值可能会出现重复，所以报了重复键警告。 解决：将key变成唯一的就行 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值