vue.js:991 [Vue warn]: Duplicate value found in v-for="value in arr": "tomato". Use track-by="$index" if you are expecting duplicate values.
本身要实现的效果是: 点击按钮,把tomato添加到数组中。
第一次点击, 添加成功, 第二次点击,就报了如下的错误。
1、这是用的是Vue.js v1.0.21。 报的如下错:

解决办法:
在使用v-for指令的元素上面, 添加 track-by="$index", 就可解决问题。
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
<div id="box">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr" track-by="$index">
{{value}}
</li>
</ul>
</div>
2、若使用Vue.js v2.5.16版本, 就不会出现这样的问题。
这里的例子, 是双点击事件。没有加track-by="$index"属性值哦。
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
<div id="box">
<input type="button" value="按钮" v-on:dblclick="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
最后, 不报错了, 但是点击一次添加一次“tomato”。如下图所示:

写于2018年5月28日
90后,前端妹子,爱好英语。
有两个微信公众号【莞儿】是关于英语学习的, 【前端进益】是关于技术的。欢迎来撩哦!
网友评论