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,'================================') })
复制代码

 

posted @   少哨兵  阅读(13306)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示