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

已于 2022-05-06 22:04:59 修改
阅读量8.7k 收藏 4
点赞数 7
分类专栏： 我爱bug 呜呜呜 文章标签： 前端
于 2022-05-06 21:43:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57396733/article/details/124618580
版权

1.场景展示

2.分析

原本以为只是简单的子传父，子把输入的内容，传给父亲，新增到list数组中

实际却出现了奇怪的问题

功能确实是正常实现了，但却出现了如下报错信息

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

大致意思为：避免使用非原语值作为键，而使用字符串/数字值

3.出错地方

 我们仔细揣摩这几处

我将item.id作为key值，由于key得为唯一值，为了保证后续新增的item.id是唯一的，准备在此巧妙的使用了时间戳(然而实际上误写为了 new Date())。由于误写，造成了一些列错误。

原有的三条数据，item.id是number类型，然而误写的new Date()并不是number类型，而是object。新增的item.id与原有的item.id数据类型不同。

4.进一步思考

原key值是number类型，我新增一个key是string类型，会报错吗？

 

 不会报错，原key值为number类型，新增的key可以是string类型，但不能是数组，对象等复杂类型数据

 

之后改成时间戳就对了

 总结：虽然因为低级失误导致错误，但从这个错误中分析出了原本不曾考虑过的问题，对key的理解也加深了。错误并不可怕。还是那句话，我爱bug，呜呜呜

谁扔的炮仗啊
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-wizard-primitive:一个react向导原语-用钩子构建！
05-02
向导/步进器的零依赖支架，没有任何UI限制。 钩子和渲染道具API可用！ 将向导拆分为多个组件 建立自己的抽象 原料药 Step useWizard 例子 useWizardStep 例子 Wizard 例子 WizardStep 例子 路由 基本 初始哈希路径 例子 例子 :link: 基本挂钩 :link: 基本渲染道具 :link: 建立向导 :link: 自定义抽象 从旧版本迁移从v1升级 贡献者 问题 您需要实现向导/步进器，但是有特定的UI要求。 您需要一个适合各种用例的灵活解决方案。 查看示例，看看有什么可能。 解决方案 React Wizard Primitive处理状态管理，然后您带上UI。 利用渲染道具或挂钩API摆脱​​繁琐的样板。 您可以使用此库来构建其他抽象，使其更适合您的特定需求。 快速开始 安装react-wizard-primitive npm i react-wizard-pr
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 vue-introjs安装插件从'vue-introjs'导入VueIntro; Vue.use（VueIntro）; 使用CDN版本的introJs确保已将intro.js脚本和样式安装并附加到页面上。 该插件没有内置的intro.js。 这样做的动机是使开发人员可以更好地控制intro.js版本。 与webpack一起使用安装所需的依赖项：yarn
解决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值报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
qq_42724424的博客
05-04 243
1，问题：vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead. 2.原因：这个是由于v-for循环里，key值可能重复了，所以会报这个错。key值是必须唯一的，如果重复就会报错 解决方法：可以把key值改为index或者id，就可以避免这个情况 ———————————————— ...
Vue报错：Avoid using non-primitive value as key, use string/number value instead
qq_38261819的博客
10-17 7693
报错的意思是 不要用对象或是数组作为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 2355
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 716
在使用 for 循环时，不要用对象或是数组作为key，用string或value作为key，逐一排查页面中 使用到 for 设置 key 地方，修改后解决问题。
VUE--组件示例 博客 https://gudianxiaoshuo.blog.csdn.net/article/detail
05-28
博客 https://gudianxiaoshuo.blog.csdn.net/article/detail VUE 组件示例
vue-fullpage.js：fullPage.js的官方Vue.js包装器http：alvarotrigo.comvue-fullpage
02-06
Vue-fullpage.js 官方Vue.js包装器。 | 通过 。 感谢 ， 和 目录 安装 终奌站： // With bower bower install vue-fullpage.js // With npm npm install --save vue-fullpage.js 执照 非开源许可证 如果要使用...
vue-color：适用于Sketch，Photoshop，Chrome等的Vue拾色器http://vue-color.surge.sh
02-06
$ npm install vue-color 普通JS var Photoshop = require ( 'vue-color/src/Photoshop.vue' ) ; new Vue ( { components : { 'Photoshop' : Photoshop } } ) ES6 import { Photoshop } from 'vue-color' new ...
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead.
平凡的人类的博客
04-22 717
每天一个小 bug 人麻了… 偶然打开控制台发现 md 又报错，上头两秒钟。
vue项目中报错：Avoid using non-primitive value as key, use string/number value instead. 不要使用index作为键
szwwwx的博客
09-10 277
报错的大概意思是：作为 子级的列表元素 不要使用index作为键，否则就跟没有设置键一样。父组件传递数组给子组件 在子组件遍历改数组时， 可以为其他的字符串或数字。那么修改key就可以解决。于是修改：:key=“item.id”vue项目中报错：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.
coldriversnow的专栏
03-10 3641
报错内容如下： [Vue warn]：避免使用非原语值作为键，而是使用字符串/数字值。 [Vue warn]：检测到重复的键：“[object]”。这可能会导致更新错误。 错误代码是： 这里的key 少写个id item对象中有一个唯一值：d.id ...
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 170
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
[vue warn]: avoid using non-primitive value as key, use string/number value instead.
08-27
### 回答1： 这是Vue的警告信息，意思是在使用v-for指令时，不要使用非原始值作为key，而应该使用字符串或数字值作为key。这是因为Vue在渲染列表时需要使用key来跟踪每个元素的身份，如果使用非原始值作为key，可能会导致渲染错误或性能问题。因此，建议在使用v-for指令时，始终使用字符串或数字值作为key。 ### 回答2： Vue中的“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告的意思是在使用Vue的v-for指令时，应该使用基本类型（即字符串或数字）作为循环中的元素的key。 在Vue中，当使用v-for指令迭代一个数组或对象时，需要为每个迭代的元素指定一个唯一的key属性。这样Vue才能正确地跟踪每个元素的变化并进行优化。 然而，警告指出v-for指令的key属性不应该是一个非基本类型的值，例如一个对象。这是因为对象是引用类型，而在JavaScript中，当比较两个不同的对象时，它们是不相等的，即使它们具有相同的属性和值。因此，Vue无法正确地比较和跟踪对象的变化，从而导致错误和不一致的结果。 解决这个问题的最佳方法是将非基本类型的值转换为字符串或数字，并使用它们作为key属性。通过将非基本类型的值转换为字符串或数字，Vue可以正确地比较和跟踪它们的变化。例如，如果使用一个对象的属性作为key属性，可以使用对象属性的字符串值作为key。 综上所述，“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告意味着在使用v-for指令时，应该将非基本类型的值转换为字符串或数字，并将它们作为key属性。通过这样做，可以避免错误和不一致的结果，并确保Vue正确地比较和跟踪元素的变化。 ### 回答3： 这个警告是来自Vue的，意思是应该避免使用非原始值作为key，而应该使用字符串或数字值作为key。在Vue中，当我们使用v-for指令循环渲染一个列表时，我们需要为每个列表项提供一个唯一的key值。这个key值可以是字符串或数字类型的，但不建议使用非原始值，比如对象或函数。 原因是Vue需要使用这个key值来进行性能优化和虚拟DOM的更新。如果我们使用了非原始值作为key，Vue会进行浅比较来判断是否需要更新DOM，而对于非原始值来说，浅比较可能会导致一些意外的问题。 因此，为了避免这种潜在问题，Vue建议我们使用字符串或数字类型的值作为key，因为它们可以保证唯一性，并且在进行比较时更加可靠。 解决这个警告的方法很简单，我们只需要将非原始值转换为字符串或数字即可。这可以通过将对象序列化为JSON字符串或使用对象的某个唯一属性作为key值来实现。 总结起来，当我们在Vue中使用v-for指令渲染列表时，要避免使用非原始值作为key，而应该使用字符串或数字类型的值作为key，以避免出现性能问题和意外的更新行为。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值