Vue handles the array page through the following table without rendering

This time I will bring you Vue to handle the array page not rendering through the following table, and Vue to handle the array page not rendering through the following table. What are the precautions?The following is a practical case. 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'
};

This will cause Vue to be unable to update View.

The correct way is not to assign values ​​to the array elements, but to update:

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

Or, through the splice() method, delete an element and then add another element to achieve the effect of "assignment":

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

Vue can monitor 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 option overlay of select

How to import the css library in vue.js

The above is the detailed content of Vue handles the array page through the following table without rendering. For more information, please follow other related articles on the PHP Chinese website!