問題描述
vue版本 : 2.x
首先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的作用還沒有接觸到.)
而解決辦法:
我想到的就是多加一層html標簽,但是這樣會多出一些沒有語義的標簽,僅是為了保證key的唯一性而添加標簽,但是相比於手動拼接字符串我更願意這樣.
或者是網上推薦的手動拼接.但是:key是手動進行修改的.如果忘記:key的數據和本來的數據是不一樣的.在后期維護起來不是那么方便.
示例代碼
<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>