观察简单数组的元素

Question

Vue 看不到简单数组项的变化。

我正在学习 Vue.js，但对 watcher 有疑问。 即我试图观察数组的变化，并改变一个数据值。 每次我添加新项目并更改或删除现有项目时，我都想更改值。

data() {
    return {
        change: false,
        array: ['one','two','three','four']
    }
},
watch:{
    array:{
        deep:true,
        handler(){
            this.change = true;
        }
    }
}

Vue 只查看数组长度何时更改，而不是特定元素。

Answer 1

您可以使用 dot-like-string 表示法查看 object 中的嵌套值，如 docs 所示。

var vm = new Vue({
  data: {
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})

据我所知，您不能对数组（即array[0]）执行此操作，因为引用我的班次或被删除。我认为做你想做的最好的方法是比较 newValue 和 oldValue 在观察者 handler 函数如果整个数组发生变化。

// from vuejs docs
watch: {
  // whenever question changes, this function will run
  question: function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...'
    this.debouncedGetAnswer()
  }
},