Part of the array changes in the props object of the Vue Array Diary Diary cannot be re-rendered, and the view does not change according to the data.

First declare a component and then throw the object into the component
Insert picture description here;
html is to modify the array
Insert picture description here
js code after rendering to change the array in the object
Insert picture description here;
**

  1. Vue has stated that the direct subscript change of the array will not be observed, so I tried it (vue.set, but I did not change the subscript but directly changed the number of groups so it was useless)**

2. Then I tried to force the update this.$forceUpdate() This is effective

  1. Later, I tried to use push again and the result failed.
    But I still didn’t find the specific reason. Later, I checked whether the two arrays are different before assigning values. I really found the difference. An array with Observer can be observed normally and re-rendered.Insert picture description here

The other one without the Observer attribute cannot be observed
Insert picture description here
;

This is because the parent component does not have this attribute at all

! It is the property that I set when the button is clicked by me. This property belongs to the component itself, because the properties of the component change the property of the component and it will not affect the parent component. So just set the properties in the life cycle of the parent component creation.

Seeing so many people visiting this should be the most common bug like me, so let me add some more. If the data changes and the view is not refreshed, it may be due to the following problems

  1. Data manipulation method is not so with vue of view can not refresh the use Vue.set Vue.delete can be solved
  2. View has led to cache the page does not refresh this problem is a long story solution is to add a unique key elements <div :key='id'>hello world<div>
  3. Force refresh view function this.$forceUpdate() (This method is not recommended, mainly caused by 1-2, if it is caused by 1, using this method is invalid and effective by 2)
  4. There is also improper operation. As in this article, the parent-child component communication adds an array to the child component. The father of course does not know

Guess you like

Origin blog.csdn.net/qq_35189120/article/details/83114510