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.
意思是:避免使用非基本值作为键,而是使用字符串/数字值。
Duplicate keys detected: '[object Object]'. This may cause an update error.
意思是:检测到重复键:'[object object]'。这可能会导致更新错误。
主要问题出现在:v-for 遍历 :key = obj :key 给了一个obj对象 ,改为字符串或数字即可解决:
代码
<a-table :columns="columns" :data-source="data" bordered size="middle" :pagination="pagination"> <!-- 插槽 --> <!-- <template slot="footer" slot-scope="currentPageData"> Footer </template> --> <span slot="tags" slot-scope="tags"> <a v-for="tag in tags" :key="tag"//这里后面接到数据后换成了对象,所有tag变成了obj 改成数字即可,或者去掉key :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'" > <p> <a :href="tag.file_url">{{tag.filename}}</a> </p> <!-- <a-spin v-if="tag.length<15" /> --> <!-- <img style="width: 80px;height: 80px;" v-if="tags" :src="tags" alt=""> --> <!-- {{ tag.toUpperCase() }} --> </a> </span> <!-- 内部表 --> <!-- <div slot="expandedRowRender" slot-scope="record" style="margin: 0"> 1231 {{record}} </div> --> </a-table>
this.data.map((v,i)=>{ console.log(v.tags) url =this.baseurl+ 'jk_PLM/get_drow_and_doc.php?pid='+v.key // console.log(url) this.$http.get(url).then((res)=>{ console.log(res.data) this.data[i].tags = res.data // res.data.map((value,ind)=>{ // // value.filename,value.file_url // v.tags.push({
//或者这里添加key // filename:value.filename, // file_url:value.file_url // }) // }) }) console.log(this.data,'================================') })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)