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>

Logo

前往低代码交流专区

更多推荐