Vue.js 道具复制和反应性

Question

这是我的问题：我在组件上有一个 v-for 循环。 v-for 循环基于由输入中输入的搜索词过滤并由计算返回的数组。

子组件显示一些基于过去道具副本的数据，因为我需要修改它们。

过滤效果很好，但子组件的内容没有正确更新，基于 props 的副本。

这是一个极简主义的例子： https://codesandbox.io/s/friendly-engelbart-8iu4u?file=/src/App.vue

您可以在控制台中看到过滤效果很好，但视觉结果却不是（尝试过滤，例如使用字母“ba”）。 如何在组件中结合反应性和道具副本？

Answer 1

当您更改数据时，:key 引起的这种情况不会改变，因为 :key 值基于 v-for 索引，而不是代表每个用户数据的唯一值。

尝试将id添加到用户对象中，并将其用作:key，以确保每个用户数据都有自己唯一的:key

users: [
    {
        id: 1,
        lastname: "Einstein",
        firstname: "Albert"
    },
    ...
]

演示： https://codesandbox.io/s/jolly-sun-optlr?file=/src/App.vue