天天看點

[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.

首先Duplicate keys detected: '0'. This may cause an update error是vue發現key不是唯一的而引發的錯誤.

譯為中文大概是 : 檢測到重複鍵 : '0'. '0'可能會導緻一個更新錯誤.

解決辦法網上找的其他也有一些.通過手動進行修改:key進而解決,比如說進行拼接字元串.因為為了解決不報錯,而手動修改了資料.個人感覺不應該是這樣的.

最後找到的問題所在:在同一層DOM節點上,vue發現key不是唯一的.是會報錯.但是如果不是在同一層DOM使用v-for循環,則不會報錯.是以呢,如果不在同一層DOM上進行for循環,就可以保證了key的唯一性.(對于:key的作用還沒有接觸到.)

錯誤寫法如圖:

[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.

 更改:

[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.
上面index+1還是會可能出現同樣問題的,改index+arr5.length      
<div v-for="(item,index) in list" :key="index+1"></div>
<div v-for="(item,index) in list" :key="index+2"></div>
<div v-for="(item,index) in list" :key="index+3"></div>
<div v-for="(item,index) in list" :key="index+4"></div>
<div v-for="(item,index) in list" :key="index+5"></div>      

繼續閱讀