跟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 进入原位更新模式:片断不会被移动,而是简单地以对应索引的新值刷新。这种模式能处理数据数组中重复的值


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


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

前往低代码交流专区

更多推荐