vue项目报错Avoid using non-primitive value as key, use string/number value instead.

最新推荐文章于 2023-07-31 14:19:06 发布
最新推荐文章于 2023-07-31 14:19:06 发布
阅读量466 收藏
点赞数 1
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37161741/article/details/107607490
版权

项目报错


在这里插入图片描述
这个是由于v-for循环里，key值可能重复了，所以会报这个错。 

 <el-checkbox v-for="city in cities"
                :label="city.name"
                :key="city"
                style="width:885px;height:100px;margin:0 auto;border:1px solid #ccc;border-radius:10px;padding:10px;margin-bottom:20px"
              >
              </el-checkbox>

应该这样写

<el-checkbox
                v-for="(city,index) in cities"
                :label="city.name"
                :key="index"
                style="width:885px;height:100px;margin:0 auto;border:1px solid #ccc;border-radius:10px;padding:10px;margin-bottom:20px"
              >
              
              </el-checkbox>
PairsNightRain
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决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 v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决报错Avoid using non-primitive value as key, use string/number value instead.
温温的博客
07-26 877
3] 这个错误通常是由于在v-for循环中的:key赋值问题导致的，解决方法是使用合适的字符串或数字作为:key的值。[1] 这个错误通常出现在使用中的进行循环遍历值时。这个错误信息的意思是要避免使用非基本值作为键，而是使用字符串/数字值代替。[2] 这个错误的解决方案是检查是否有重复的键值，并确保使用字符串或数字作为键值。我这边报错的原因是两个键值写的一样。
el-checkbox-group 使用遇到的坑
qq_41957192的博客
11-24 3348
想实现的功能 el-checkbox-group 多选、表单验证必选 <!-- 报错代码 --> <el-dialog title="配置详情" width="395px" center > <el-form :model="configInfo" id="form" ref="form" :rules="rules" size="small" label-position="right" label-width="120px" &gt.
报错处理：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
qq_38261819的博客
10-17 7776
报错的意思是 不要用对象或是数组作为key，用string或value作为key。意思是：避免使用非基本值作为键，而是使用字符串/数字值。
vue-cle3项目运行报错sockjs-node-info解决方案.docx
10-26
vue-cle3项目运行报错sockjs-node-info解决方案.docx
vue-introjs-与vue.js http://introjs.com/集成了intro.js分步指南和功能介绍。-Vue.js开发
05-27
vue-introjs Vue的intro.js绑定。 安装添加软件包yarn添加vue-introjs＃或通过npm：npm i vue-introjs安装插件导入VueIntro和Vue的vue-introjs intro.js绑定。 安装添加软件包yarn添加vue-introjs＃或通过npm：npm i...
解决webpack4+升级webpack5+ vue-pdf不可用问题
06-09
ERROR in ./node_modules/vue-pdf/node_modules/pdfjs-dist/es5/build/pdf.worker.js (./node_modules/vue-pdf/node_modules/worker-loader/dist/cjs.js!./node_modules/vue-pdf/node_modules/pdfjs-dist/es5/build/...
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length‘ of null
yxm_136452789的博客
11-03 2044
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length’ of null。 报错 报错原因 v-model绑定的值在定义的时候有问题，多选框类型应该定义为数组，之前是checkList:null。 <el-checkbox-group v-model="checkList" :disabled="disabled" @change="handleChange($event, re
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
weixin_57396733的博客
05-06 8803
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.
悟世君子的博客
12-16 2391
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.
代码小疯子
09-18 736
在使用 for 循环时，不要用对象或是数组作为key，用string或value作为key，逐一排查页面中 使用到 for 设置 key 地方，修改后解决问题。
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead.
最新发布
weixin_42354661的博客
07-31 287
同一个错误：[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.
sinat_36695865的博客
07-06 364
vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead. 遍历的时候不要使用key,使用String 或者Number类型来作为key <el-option v-for="item in accountList" :key="item" :label="item.accountWithName" :value="item.account"> </el-option>
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 值设置为一个字符串或者数字来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值