嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

vue.js — 解決添加重復數據報錯問題

2021-8-24 前端達人

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
            data: {
                arr: ['apple','pear','orange']
            },
            methods:{
                add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato".  //Use track-by="$index" if you are expecting duplicate values. //重復添加會報數據重復提示 this.arr.push('tomato');
                }
            }
        }).$mount('#box'); </script> </html>


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33

當我們點擊【添加】按鈕兩次之后，會出現如下報錯信息

使用track-by解決添加重復數據報錯問題

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr" track-by='$index'> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
            data: {
                arr: ['apple','pear','orange']
            },
            methods:{
                add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato".  //Use track-by="$index" if you are expecting duplicate values. //重復添加會報數據重復提示 this.arr.push('tomato');
                }
            }
        }).$mount('#box'); </script> </html>


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33