Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to solve the problem that Vue cannot listen for array changes

2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to solve the problem that Vue cannot listen for array changes". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the problem that Vue can't listen for array changes.

Catalogue

1. Vue snooping array

2. Vue cannot listen for array changes.

1. Vue snooping array

Vue can actually listen for array changes, such as

Data () {return {watchArr: [],};}, watchArr (newVal) {console.log ('listening:' + newVal);}, created () {setTimeout () = > {this.watchArr = [1, 2, 3];}, 1000);}

Delete two elements from array subscript 0 and insert an element 3 in subscript 0 using, for example, splice

Data () {return {watchArr: [1,2,3],};}, watchArr (newVal) {console.log ('listening:' + newVal);}, created () {setTimeout (()) = > {this.watchArr.splice (0,2,3);}, 1000);}

The push array can also be monitored.

2. Vue cannot listen for array changes.

But the array cannot be monitored in the following two situations

When setting array items directly using the index, for example, arr [indexofitem] = newValue

When you modify the length of an array, such as arr.length=newLength

For example, it is impossible to listen for array changes.

1. Use the index to modify the array value directly.

Data () {return {watchArr: [{name: 'krry',}],};}, watchArr (newVal) {console.log (' listening:'+ newVal);}, created () {setTimeout (() = > {this.watchArr [0] .name = 'xiaoyue';}, 1000);}

2. Modify the length of the array

If the length is larger than the original array, the subsequent element is set to undefined.

Truncate the redundant elements if the length is less than the original array.

Data () {return {watchArr: [{name: 'krry',}],};}, watchArr (newVal) {console.log (' snooping:'+ newVal);}, created () {setTimeout (()) = > {this.watchArr.length = 5;}, 1000);}, at this point, I believe you have a better understanding of "how to solve the problem that Vue cannot listen for array changes". You might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report