牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2017-12-23 投稿人: 浏览次数:224

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


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



声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。