Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-03-28 17:30:43
Original
1898 people have browsed it

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'
};
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, 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);
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 .

# 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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template