在VUE中报Duplicate keys detected: '0'. This may cause an update error的报错原因以及解决办法
问题描述
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>
