Preface
The dynamic refresh of vue array failed, including using array functions such as pop, push, splice, shift, and forced refresh of this.$forceUpdate().
reason
In fact, the reason is not the so-called problem of vue not listening to arrays.
In fact, Vue cannot detect changes in the following arrays just because of JavaScript limitations:
When you use the index to set an array item directly:
For example:
[indexOfItem] = newValue
When you modify the length of the array,
For example:
= newLength
But I assigned the value directly
. = new item；
In this way, vue can still be listened to, so I tried the above methods, but none of them succeeded
Finally, I suddenly saw a word ** "on-site reuse" **. On the official website, there is such a sentence
- When v-for is updating the rendered element list, it defaults to using the "in-place multiplexing" policy.
- If the order of data items is changed, Vue will instead move the DOM element to match the order of data items, it will simply reuse each element here and make sure it displays each element that has been rendered under a specific index.
- This default mode is valid, but only applies to list rendering outputs that do not depend on child component state or temporary DOM state (for example: form input values).
So, I tried to add a unique id as the key value, and finally succeeded
What you get
- Use the object's properties to modify it directly, the page cannot be refreshed in winter
- When deemed as v-for, try to add a unique value as key to avoid vue using the "in-place reuse" strategy, resulting in display problems.
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.