Solution to Vue's inability to watch array changes

1. Vue listener array

Vue can actually monitor array changes, such as

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

For example, use splice(0,2,3) to delete two elements from array index 0 and insert an element 3 at index 0.

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. Situations where vue cannot monitor array changes

However, arrays cannot be monitored in the following two situations

• When setting an array item directly using an index, for example, arr[indexofitem]=newValue
• When modifying the length of an array, for example, arr.length = newLength

Example of a situation where array changes cannot be monitored

1. Use indexes to modify array values ​​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 greater than the original array, the subsequent elements are set to undefined
• If the length is less than the original array, the extra elements will be truncated.

data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watchArr (newVal) {
  console.log('Listening: ' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.length = 5;
  }, 1000);
},

This is the end of this article about Vue not being able to watch array changes. For more related content about Vue not being able to watch array changes, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!