在Vue.js中观察被动数据的所有属性

Question

我对后端进行了API调用，根据返回的数据，我动态设置了被动数据：

let data = {
  quantity: [],
  tickets: []
}

api.default.fetch()
  .then(function (tickets) {
    data.tickets = tickets
    tickets.forEach(ticket => {
      data.quantity[ticket.id] = 0
    })
  })

基于此流程，如何动态设置数量数组中所有无功元素的观察器？

Answer 1

您可以创建一个计算属性，您可以在其中stringify数量数组，然后在此计算属性上设置watcher。代码如下所示：

computed: {
  quantityString: function () {
      return JSON.stringify(this.quantity)
    }
}
watch: {
    // whenever question changes, this function will run
  quantityString: function (newQuantity) {
    var newQuantity = JSON.parse(newQuantity)
    //Your relevant code
  }
}

Answer 2

Using the [] operator to change a value in an array won't let vue detect the change, use splice instead.