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

This time I will show you how to deal with the page not rendering when Vue uses the following table to modify the array. Solve the problem that the page does not render when Vue uses the following table to modify the array. What are the precautions?. Here is a practical case. Let’s take a look.

It should be noted that the reason why Vue can monitor changes in Modelstate 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 use xe-utils in vue

vue-router does not display routes when building How to deal with the page

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