问题描述
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>