vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.解决方法

最新推荐文章于 2024-05-30 15:52:02 发布

weixin_40551017

最新推荐文章于 2024-05-30 15:52:02 发布

阅读量267

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40551017/article/details/107326655

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Avoid using non-primitive value as key, use string/number value instead.
说明绑定的key值可能重复了，我们应该把key值改成index或者id

<div v-for="(item,index) in recommends" :key="index" class="recommend-item">
    <a :href="item.link">
        <img :src="item.image" alt="">
        <div>{{item.title}}</div>
    </a>
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_40551017

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Uni-app篇 vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.

独树一枝

01-04

333

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. found in

前端程序员、项目经理、人工智能博主

12-04

716

控制台报错报错原因说v-for 循环的key值重复了，那就看看自己写的代码报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去改正后的代码报错解决，大功告成

参与评论您还未登录，请先登录后发表或查看评论

vue报错信息（Avoid using non-primitive value as key, use string/number value instead.）

热门推荐

sou_vyp的博客

08-02

3万+

避免使用非原始值作为关键字，而使用字符串/数字值代替。解决方法： for循环中，绑定的key值不能为对象，而是取一个字符串或数值，如下图：

vue: Avoid using non-primitive value as key, use string/number value instead.

qq_41687299的博客

01-05

259

问题：如下：

Avoid using non-primitive value as key, use string/number value instead.

信徒博客

05-13

2336

错误代码错误原因这里的[Vue warn]是指不要用对象或是数组作为key，用string或number作为key 正确的应该是

Vue循环问题Avoid using non-primitive value as key, use string/number value instead.

陌上人如玉，公子世无双

09-11

823

问题解决： item值重复，问题：解决：此处写了两个绑定，将v-model删掉即可

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

平凡的人类的博客

04-22

888

每天一个小 bug 人麻了… 偶然打开控制台发现 md 又报错，上头两秒钟。

[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.

06-06

在 Vue 中，key 值用于帮助 Vue 高效地渲染列表，如果使用非基本类型的数据作为 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报错:ues string/number value instead

Bright2017的博客

12-30

2578

ues string/number value instead

如何在android sdutio提交（SVN）代码后完善代码（根据代码检查器完善）

三禾木

05-09

1916

用SVN提交代码后代码检查器提示的代码完善 1.Access can be package-private 删除“public”就可以,但如果是类有这个提示，则需要编译进行相应的取舍。 2.Access can be private 需要把“public”改为private Access Levels Modifier Class Package Subclass

Android-一些问题

ohcezzz的博客

06-30

231

存储方式 SharedPreferences SqLite Content Provider 文件网络服务Service 继承Service类配置启动 startService bindService 广播定义广播接收器，继承BroadcastReceiver 注册广播事件动态注册静态注册发送广播设置接受广播的处理函数线程 Handle：接受和处理信息 Mess

Vue 出现Avoid using non-primitive value as key, use string/number value instead.和Duplicate keys detect

weixin_45890764的博客

12-01

213

VUE出现Avoid using non-primitive value as key, use string/number value instead和Duplicate keys detected: '[object Object]'. This may cause an update error. 这种错误经常会发生在item遍历时，解决方法加上 :key="item.id" <div v-for="item in recommends" :key="item.id"> &l

Avoid using non-primitive value as key, use string/number value instead.found in

weixin_45266081的博客

08-20

1149

在这个地方报错是因为，在vue程序中的v-for没有指定key的值，或者指定的key值为循环的数据，解决方法为，把key的值换成下标值

VUE3学习

cmwly的博客

02-09

936

VUE3.0基础学习

[Violation]Avoid using document.write().

最新发布

2301_79698214的博客

05-30

927

方法最初是用于在文档流中直接写入字符串。但是，由于它会重写整个文档流，因此在现代的前端开发中，通常建议避免使用它，因为它可能会导致性能问题，并且容易破坏页面的现有内容。，它将清除页面内容并开始写入新内容。在这种情况下，使用上述方法更加有效和推荐。如果你需要动态地向页面中插入内容，你可以使用以下方法来替代。事件发生之后，这样可以保证在页面加载完成后执行。方法创建元素并将它们添加到文档中的适当位置。仅在你完全控制页面的情况下，并且在。请注意，如果你在页面已完全加载后使用。这个报错表示应当避免使用。

为什么要避免使用document.write，尤其是脚本注入

极客神殿

08-25

3025

Web 性能测试工具比如 Google Page Speed 或者 Dareboost 已经指出：使用 document.write 注入一段脚本会引起严重的网站加载耗时问题。让我们再次讨论这个话题，因为 Chrome 的下次更新将不再允许这样的脚本注入方式。你将面临什么问题？有什么替代方案？ Chrome 将不再执行通过 document.write 注入的脚本 9月初 Paul Kinlan 在 developers.google.com 网站上宣布：Chrome 将很快干预 document.wri

luajit官方性能优化指南和注解

weixin_30697239的博客

10-24

1051

luajit是目前最快的脚本语言之一，不过深入使用就很快会发现，要把这个语言用到像宣称那样高性能，并不是那么容易。实际使用的时候往往会发现，刚开始写的一些小test case性能非常好，经常毫秒级就算完，可是代码复杂度一上去了，动辄几十上百毫秒的情况就会出现，性能表现非常飘忽。为此luajit的mailling list也是有不少人咨询，作者mike pall的一篇比较完整的回答被放在了官...