美文网首页
报错Duplicate value found in v-for

报错Duplicate value found in v-for

作者: 婷诗漾 | 来源:发表于2018-05-28 12:59 被阅读0次

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后,前端妹子,爱好英语。

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

相关文章

网友评论

      本文标题:报错Duplicate value found in v-for

      本文链接:https://www.haomeiwen.com/subject/sbmujftx.html