vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in

简介: vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in

控制台报错

报错原因说v-for 循环的key值重复了,那就看看自己写的代码

报错时的代码,如下:

我们可以在v-for循环里面再定义个index值然后写到key 里面去

改正后的代码

报错解决,大功告成

相关文章
|
27天前
Vue3只渲染一次 v-once
Vue3只渲染一次 v-once
|
27天前
|
JavaScript
Vue3 条件渲染 v-show
Vue3 条件渲染 v-show
Vue3 条件渲染 v-show
|
27天前
|
JavaScript
Vue 循环渲染 v-for
Vue 循环渲染 v-for
|
27天前
|
JavaScript
Vue 只渲染一次 v-once
Vue 只渲染一次 v-once
|
12天前
|
JavaScript 前端开发 索引
Vue嵌套循环渲染与条件渲染--v-for|v-if
Vue嵌套循环渲染与条件渲染--v-for|v-if
19 0
|
26天前
|
JavaScript
Vue报错\page\ComplianceTraceReport\index.vue{ parser: “babylon“ } is deprecated; we now treat it 怎么解决?
Vue报错\page\ComplianceTraceReport\index.vue{ parser: “babylon“ } is deprecated; we now treat it 怎么解决?
|
23天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
41 3
|
5天前
|
消息中间件 数据采集 SQL
DataWorks操作报错合集之通过dataworks把表数据发送到kafka,表字段全是string类型如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
18 2
|
15天前
|
JavaScript 前端开发
完美解决 报错 Vue Invalid prop: type check failed for prop “min“. Expected Number with value 1,
完美解决 报错 Vue Invalid prop: type check failed for prop “min“. Expected Number with value 1,
23 1
|
16天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
15 0