Vue如何添加重复数据

Vue如何添加重复数据

循环：

常规：v-for="value in data"

缺陷：无法添加重复数据

track-by可以添加重复数据

track-by='索引' 提高循环性能

track-by='$index/uid（数据库id）'

用例：<div
id="box">

<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['apple','pear','orange']
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
}).$mount('#box');
</script>

track-by优化可以添加重复数据

<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in arr" track-by="$index">
{{val}}
</li>
</ul>
</div>
<script>
var vm =new Vue({
data:{
arr:['apple','pear','orange']
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
}).$mount('#box');
</script>