問題描述
vue版本 : 2.xjavascript
首先Duplicate keys detected: '0'. This may cause an update error是vue發現key不是惟一的而引起的錯誤.html
譯爲中文大概是 : 檢測到重複鍵 : '0'. '0'可能會致使一個更新錯誤.vue
解決辦法網上找的其餘也有一些.經過手動進行修改:key進而解決,好比說進行拼接字符串.由於爲了解決不報錯,而手動修改了數據.我的感受不該該是這樣的.java
最後找到的問題所在:在同一層DOM節點上,vue發現key不是惟一的.是會報錯.可是若是不是在同一層DOM使用v-for循環,則不會報錯.因此呢,若是不在同一層DOM上進行for循環,就能夠保證了key的惟一性.(對於:key的做用尚未接觸到.)app
而解決辦法:this
我想到的就是多加一層html標籤,可是這樣會多出一些沒有語義的標籤,僅是爲了保證key的惟一性而添加標籤,可是相比於手動拼接字符串我更願意這樣.spa
或者是網上推薦的手動拼接.可是:key是手動進行修改的.若是忘記:key的數據和原本的數據是不同的.在後期維護起來不是那麼方便.
code
示例代碼
<script type="text/javascript" src="./vue_localtion/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for='(item,index) in cyclicData' :key='index'>{{item}}</p>
<hr>
<div><!--若是去掉這一層div則會報錯.由於在同一層DOM節點上 :key的value有重複的-->
<p v-for='(item,index) in sortCyclicData' :key='index'>{{item}}</p>
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
cyclicData: [1, 8, 3, 7, 5, 6],
},
computed: {
sortCyclicData: function () {
return this.cyclicData.sort(function (num1, num2) {
return num1 - num2;
})
}
},
})
</script>