vue数组中有相同的数据处理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/daiqisi/article/details/78881850

跟ng一样，vue的数组中有相同的数据时会报错Uncaught (in promise) TypeError

例如：

<li v-for="item in items">
           {{item.message}}
        </li>

 data:{
            items:[
                { message: 'Foo' },
                { message: 'Bar' },
                { message: 'Foo' },
                { message: 'Bar' },
                { message: 'Foo' },
                { message: 'Bar' }
            ],

在这种情况下会报错，以为items数组中有相同的数据，解决的办法跟ng有点类似，ng是track by $index ,vue是track-by="$index"

<li v-for="item in items" track-by="$index">
           {{item.message}}
        </li>

如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式能处理数据数组中重复的值

注：本文仅是本人学习过程的一些经验，如有任何问题，欢迎留言交流

希望我的入坑经验对你有所帮助，愿圣光与你同在