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>