【09】vue.js — 解决添加重复数据报错问题

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="box">

有心博客

2673人浏览 · 2017-09-07 10:16:13

有心博客 · 2017-09-07 10:16:13 发布

<!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>

当我们点击【添加】按钮两次之后，会出现如下报错信息

使用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>

解决vue添加相同数据报错

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^