Home Web Front-end JS Tutorial Solve the problem that the page does not render when Vue modifies the array through the following table

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

May 31, 2018 pm 04:38 PM
Revise array

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'
};
Copy after login

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';
Copy after login

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);
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Hot Article

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk Mar 29, 2024 pm 08:41 PM

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 modify the address location of published products on Xianyu Mar 28, 2024 pm 03:36 PM

How to modify the address location of published products on Xianyu

How to remove duplicate elements from PHP array using foreach loop? How to remove duplicate elements from PHP array using foreach loop? Apr 27, 2024 am 11:33 AM

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

PHP array key value flipping: Comparative performance analysis of different methods PHP array key value flipping: Comparative performance analysis of different methods May 03, 2024 pm 09:03 PM

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 The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy May 01, 2024 pm 12:30 PM

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 PHP array multi-dimensional sorting practice: from simple to complex scenarios Apr 29, 2024 pm 09:12 PM

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

Application of PHP array grouping function in data sorting Application of PHP array grouping function in data sorting May 04, 2024 pm 01:03 PM

Application of PHP array grouping function in data sorting

Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods Apr 30, 2024 pm 03:42 PM

Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods

See all articles