Vue.js 道具复制和反应性

Question

Here's my problem: I have a v-for loop on a component. The v-for loop is based on an array filtered by a search term entered in an input and returned by a computed.

The child component displays some data based on a copy of past props because I need to modify them.

The filtering works well but the content of the child components doesn't update correctly, being based on a copy of the props.

Here is a minimalist example: https://codesandbox.io/s/friendly-engelbart-8iu4u?file=/src/App.vue

You can see in the console that the filtering is good, but the visual result is not (try filtering for example with the letters "ba"). How can I combine reactivity and props copy in a component?

Answer 1

This caused by the :key isn't changing when you change the data since the :key value is based on the v-for index, not unique value that represent each user data.

Try adding id to the user object, and use it as the :key to make sure that each user data has its own unique :key

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

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