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

最新推荐文章于 2025-06-06 20:58:30 发布

原创最新推荐文章于 2025-06-06 20:58:30 发布 · 1.6w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

学习笔记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在Vue中如何处理含有重复数据的数组问题。当使用v-for指令遍历数组时，若数组内存在重复项，则可能导致错误。文章提供了解决方案，即通过使用track-by=$index来强制原位更新，从而避免错误的发生。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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