vue項目中報錯：Avoid using non-primitive value as key, use string/number value instead.

本文轉載自查看原文 2020-07-03 13:36 2666

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,'================================')
        })

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue key值報錯 Avoid using non-primitive value as key, use string/number value instead. vue v-for 遍歷循環時的key值的報錯：Avoid using non-primitive value as key, use string/number value instead. 解決element-ui upload組件報錯 Avoid using non-primitive value as key, use string/number value instead vue報錯[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead. vue——子組件報錯：The data property "isHome" is already declared as a prop. Use prop default value instead. 報錯：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei vue報錯 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's 解決Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.問題 vue項目報錯如下：(Emitted value instead of an instance of Error) vue項目報錯如下：(Emitted value instead of an instance of Error)