Vue 循环 [Vue warn]: Avoid using non-primitive value as key

最新推荐文章于 2023-04-22 13:15:00 发布
转载 最新推荐文章于 2023-04-22 13:15:00 发布 · 134 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/qianjinyan/p/10930048.html
文章标签：

#javascript #ViewUI

博客讲述了页面索引时不添加:key会提示虚线，添加:key= \content\后控制台出现[Vue warn]: Avoid using non-primitive value as key提示。原因是不要绑定对象数组，应使用元素或String类型。最后将其改为content.id后不再报错。

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

 

页面中不添加  ：key

索引的时候，会不停的提示虚线，但不影响使用

后来加了一个索引，加成了:key= "content"

从后台取出来的contents是一个list，里面有多条content记录，

content对象中会有id,name，等属性

这时候，也不影响使用，但是控制台console中会不停的出现提示

[Vue warn]: Avoid using non-primitive value as key

意思是不要绑对象数组啥的啊，

用元素或者String类型啊

然后就改了

content.id这个值

再也不报错了

转载于:https://www.cnblogs.com/qianjinyan/p/10930048.html

vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
前端程序员、项目经理、人工智能博主
12-04 888
控制台报错 报错原因说v-for 循环的key值重复了，那就看看自己写的代码 报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去 改正后的代码 报错解决，大功告成
Uni-app篇 vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
独树一枝
01-04 434
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项目中的出现的问题:[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
xiao___fang的博客
06-11 3820
在写vue项目的过程中打开网页在控制台会出现这样的错： 一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了。 key值是必须唯一的，如果重复就会报错，可以把key值改为p，就可以避免这个情况 ...
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
乐夫天命兮的博客
10-19 656
那么问题来了这个报错是什么意思呢？？？ 还是老方法，先暴力翻译一下报错语句的意思： key值是必须唯一的，如果重复就会报错 可以把key值改为index或者id，就可以避免这个情况（这里key最好用id，才能达到key值唯一，就地复用的原则，大大节省了dom的渲染） ...
vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
热门推荐
lily2016n的博客
11-16 13万+
一进页面就报错如下 一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了 key值是必须唯一的，如果重复就会报错 可以把key值改为index，就可以避免这个情况 ...
[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 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.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项目中报错：Avoid using non-primitive value as key, use string/number value instead.
平凡的人类的博客
04-22 1047
每天一个小 bug 人麻了… 偶然打开控制台发现 md 又报错，上头两秒钟。
关于报错[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
qq_42119742的博客
07-16 354
报错提示： 这个报错 是在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
qq_38261819的博客
10-17 8903
报错的意思是 不要用对象或是数组作为key，用string或value作为key。意思是：避免使用非基本值作为键，而是使用字符串/数字值。
【CSCODE-VUE】Avoid using non-primitive value as key, use string/number value instead.
少莫千华
04-25 819
问题描述 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.
coldriversnow的专栏
03-10 3786
报错内容如下： [Vue warn]：避免使用非原语值作为键，而是使用字符串/数字值。 [Vue warn]：检测到重复的键：“[object]”。这可能会导致更新错误。 错误代码是： 这里的key 少写个id item对象中有一个唯一值：d.id ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值