


Solve the problem that the page does not render when Vue modifies the array through the following table
May 31, 2018 pm 04:38 PMNow 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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk

How to modify the address location of published products on Xianyu

How to remove duplicate elements from PHP array using foreach loop?

PHP array key value flipping: Comparative performance analysis of different methods

The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy

PHP array multi-dimensional sorting practice: from simple to complex scenarios

Application of PHP array grouping function in data sorting

Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods
