Question

我有一个Vue应用程序，在其中监视数组的更改。一切正常。但是我不确定如何获取已更改的数组项的索引，因为watch回调仅传递旧/新值。

简化示例：

new Vue({
    el: '#demo',
  data: {
    things: [{foo:1}, {foo:2}]
  },
  watch: {
    things: {
      handler: function (val, oldVal) {
        alert('a thing changed')
      },
      deep: true
    }
  },
  methods: {
    change: function () {
        this.things[0].foo = 5
    }
  }
})

Answer 1

不幸的是，并非开箱即用。使用参数解构和a custom watch function的组合，您可以实现应做的事情。例如；

new Vue({
    el: '#demo',
  data: {
    things: [{foo:1}, {foo:2}]
  },
  methods: {
    change: function (...args) {
        let [thing, after, before] = args;
        
        console.log(thing);
    }
  },
  mounted: function(){
    this.things.forEach(thing => {
      this.$watch(() => thing, this.change.bind(null, thing))
    });
  }
})

从观察数组中获取索引

1 个答案: