报错Duplicate value found in v-for

vue.js:991 [Vue warn]: Duplicate value found in v-for="value in arr": "tomato". Use track-by="$index" if you are expecting duplicate values.
本身要实现的效果是： 点击按钮，把tomato添加到数组中。
第一次点击， 添加成功， 第二次点击，就报了如下的错误。
1、这是用的是Vue.js v1.0.21。 报的如下错：

QQ报错日志.png

解决办法：
在使用v-for指令的元素上面， 添加 track-by="$index"， 就可解决问题。

   <script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{ //数据
                arr:['apple','banana','orange','pear'],
                json:{a:'apple',b:'banana',c:'orange'}
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        });
    };
</script>
  <div id="box">
    <input type="button" value="按钮" v-on:click="add()">
    <br>
    <ul>
        <li v-for="value in arr" track-by="$index">
            {{value}}
        </li>
    </ul>
</div>

2、若使用Vue.js v2.5.16版本， 就不会出现这样的问题。
这里的例子， 是双点击事件。没有加track-by="$index"属性值哦。

<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{ //数据
                arr:['apple','banana','orange','pear'],
                json:{a:'apple',b:'banana',c:'orange'}
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        });
    };
</script>
 <div id="box">
    <input type="button" value="按钮" v-on:dblclick="add()">
    <br>
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
</div>

最后， 不报错了， 但是点击一次添加一次“tomato”。如下图所示：

多次点击效果.png

写于2018年5月28日

90后，前端妹子，爱好英语。

有两个微信公众号【莞儿】是关于英语学习的， 【前端进益】是关于技术的。欢迎来撩哦！