Duplicate keys detected ‘‘. This may cause an update error問題
問題描述：Duplicate keys detected: ‘6’. This may cause an update error，但模板組件可以正常渲染。
產生該問題的原因是出現了重復的key，主要分為如下兩種情況：
場景一：
報錯如下：
由圖可知，因為集合中的id有重復的值，當我們在 v-for 中使用id作為key時，即為報錯，修改為使用index索引作為key，如下：
<p v-for="(item, index) in list" :key="index">{{item.name}}</p>
1
場景二：
報錯如下：
分析： 從圖中代碼可以發現，我們使用的是索引index作為key，可還是出現了該問題。
問題產生原因： vue規定 “有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。” 官網鏈接
由於代碼中兩個for循環，p和span標簽在同一個父元素下，所以會出現該問題。
解決方案：
1.重命名key屬性，定義獨一無二的key，如下：
2.不要將多個for循環組件放在同一個父元素下，如下，嵌套一層div即可：
代碼位置： https://gitee.com/crazywsp/JavaImprove/blob/master/VueRepo/yarndemo03/src/components/ForTest.vue
————————————————
版權聲明：本文為CSDN博主「crazy_wsp」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_14994863/article/details/110674454