Solve the problem that the page does not render when Vue modifies the array through the following table

Now I will share with you an article to solve the problem of Vue modifying the array through the following table and the page does not render. It has a very good reference value and I hope it will be helpful to everyone.

It should be noted that the reason why Vue is able to monitor changes in the Model state is because the JavaScript language itself provides a 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, delete an element through the splice() method After the 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use use to register Vue global components and global instructions

A brief discussion on vue.js importing css library ( elementUi) method

Use JS code to make QR code and generate function (detailed tutorial)

The above is the detailed content of Solve the problem that the page does not render when Vue modifies the array through the following table. For more information, please follow other related articles on the PHP Chinese website!