How to deal with the page not rendering when Vue modifies the array

This time I will show you how to deal with the page not rendering when Vue modifies the array. What are the things to note when dealing with the page not rendering when Vue modifies the array? The following is a practical case, let's take a look. It should be noted that the reason why Vue is able to monitor changes in Model

state

is because the JavaScript language itself provides Proxy or Object. observe() mechanism to monitor changes in the object state. However, there is no way to directly monitor the assignment of array elements. Therefore, if we directly assign values ​​to array elements:

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};

will cause Vue to be unable to update the View.

The correct way is not to assign a value to the array element, but to update:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

Or, through the splice() method,

After deleting

an element, add another element to achieve the effect of "assignment":

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue can monitor the splice, push, unshift and other method calls of the array, so the above code can correctly update the View .

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the page not rendering when Vue uses the following table to modify the array

How to eliminate all in JS Repeating characters

The above is the detailed content of How to deal with the page not rendering when Vue modifies the array. For more information, please follow other related articles on the PHP Chinese website!