解决报错Avoid using non-primitive value as key, use string/number value instead.

已于 2023-07-26 14:34:47 修改
阅读量1k 收藏
点赞数
分类专栏： vue 文章标签： vue.js
于 2023-07-26 14:31:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kxz_0204/article/details/131938473
版权

找到图中画圈的文件
这个错误信息的意思是要避免使用非基本值作为键，而是使用字符串/数字值代替。

[1] 这个错误通常出现在使用<el-select>中的<el-option>进行循环遍历值时。

[2] 这个错误的解决方案是检查是否有重复的键值，并确保使用字符串或数字作为键值。

[3] 这个错误通常是由于在v-for循环中的:key赋值问题导致的，解决方法是使用合适的字符串或数字作为:key的值。

我这边报错的原因是两个键值写的一样

然后:key的值要唯一值，我之前写的是item

 

温温-温
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in
前端程序员、项目经理、人工智能博主
12-04 651
控制台报错 报错原因说v-for 循环的key值重复了，那就看看自己写的代码 报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去 改正后的代码 报错解决，大功告成
Uni-app篇 vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
独树一枝
01-04 300
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 8163
报错的意思是 不要用对象或是数组作为key，用string或value作为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. 意思是：检测到重复键:...
Avoid using non-primitive value as key, use string/number value instead.
悟世君子的博客
12-16 2527
vue 项目使用 v-for渲染时报错：Avoid using non-primitive value as key, use string/number value instead. 报错原因：避免使用非基本值作为键，而是使用字符串/数字值；即不要用对象或是数组作为 key，用 string 或 number 作为 key 报错代码 当 item为对象时，就会出现这种报错，将其改...
解决Avoid using non-primitive value as key, use string/number value instead.
阿水的博客
04-06 2542
解决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.
06-06
这个错误信息是因为在使用 Vue.js 的时候，你将一个非原始数据类型作为了一个 key，而 Vue.js 只支持 string 或 number 作为 key。这通常出现在使用 v-for 指令时，你可以通过将 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项目中报错：Avoid using non-primitive value as key, use string/number value instead.
weixin_42354661的博客
07-31 430
同一个错误：[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.v-for 遍历 ：key = obj :key 给了一个obj对象 ，改为字符串或数字即。译：检测到重复键:'[object object]'。这可能会导致更新错误。译：避免使用非基本值作为键，而是使用字符串/数字值。
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
weixin_57396733的博客
05-06 8973
1.场景展示 2.分析 原本以为只是简单的子传父，子把输入的内容，传给父亲，新增到list数组中 实际却出现了奇怪的问题 功能确实是正常实现了，但却出现了如下报错信息 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. 大致意思为：避免使用非原语值作为键，而使用字符串/数字值 3.出错地方 我们仔细揣摩这几处 我将item.id作为key值，由于..
Avoid using non-primitive value as key, use string/number value instead.found in
weixin_45266081的博客
08-20 1120
在这个地方报错是因为，在vue程序中的v-for没有指定key的值，或者指定的key值为循环的数据， 解决方法为，把key的值换成下标值
Vue项目提示Avoid using non-primitive value as key, use string/number value instead的报错
baidu_33164415的博客
01-23 1225
Vue项目提示Avoid using non-primitive value as key, use string/number value instead的报错
vue项目中报错：Avoid using non-primitive value as key, use stringnumber value instead.
最新发布
qq_32389095的博客
08-18 221
意思是：检测到重复键:‘[object object]’。这可能会导致更新错误。意思是：避免使用非基本值作为键，而是使用字符串/数字值。
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead. 不要使用index作为键
szwwwx的博客
09-10 317
报错的大概意思是：作为 子级的列表元素 不要使用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.报错
liguangda的博客
11-19 382
Avoid using non-primitive value as key, use string/number value instead. 翻译：避免使用非基元值作为键，而是使用字符串/数字值。 错误原因：Vue 中渲染列表是key 产生了重复， 此时应该去检查与key 有关的代码 <ul class="list-group"> <CommentDel v-for="content in comments" :key="content.id" :content="cont
Avoid using non-primitive value as key, use string/number value instead. 怎么解决
06-07
这个警告是由 Vue 的 key 绑定机制引起的，当你给一个非原始值（如对象或数组）分配 key 值时，Vue 会发出这个警告。这是因为非原始值无法被有效比较，可能导致性能问题或意外行为。 要解决这个问题，你可以将非原始值转换为字符串或数字，以便 Vue 可以正确比较 key 值。以下是一些解决方法： 1. 使用字符串或数字作为 key 如果你的数据是对象数组，可以使用对象属性的值作为 key，如下所示： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> ``` 在这个例子中，我们使用 item.id 作为 key 值，因为它是一个数字。 2. 使用计算属性 你可以使用计算属性将非原始值转换为字符串或数字，然后将其用作 key 值。例如： ```html <template> <div> <ul> <li v-for="item in computedItems" :key="item.key">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }, ], }; }, computed: { computedItems() { return this.items.map((item) => { return { key: String(item.id), name: item.name, }; }); }, }, }; </script> ``` 在这个例子中，我们定义了一个计算属性 computedItems，该属性将 items 数组转换为包含 key 和 name 属性的新数组。key 属性被转换为字符串，因此我们可以安全地将其用作 key 值。 3. 使用 Vue 的内置 key Vue 还提供了一个特殊的内置 key 值 $index，它可以用于遍历简单数组，例如： ```html <template> <div> <ul> <li v-for="(item, index) in items" :key="$index">{{ item }}</li> </ul> </div> </template> ``` 在这个例子中，我们使用 $index 作为 key 值，因为它是一个数字，且在遍历简单数组时是有效的。 总之，为了避免这个警告，你需要确保将非原始值转换为字符串或数字，并将其用作 key 值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值