99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

vue.js — 解決添加重復(fù)數(shù)據(jù)報(bào)錯(cuò)問題

2021-8-24 前端達(dá)人

<!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. //重復(fù)添加會(huì)報(bào)數(shù)據(jù)重復(fù)提示 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

當(dāng)我們點(diǎn)擊【添加】按鈕兩次之后，會(huì)出現(xiàn)如下報(bào)錯(cuò)信息

使用track-by解決添加重復(fù)數(shù)據(jù)報(bào)錯(cuò)問題

<!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. //重復(fù)添加會(huì)報(bào)數(shù)據(jù)重復(fù)提示 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