观看不更新更改提示

Question

我试图通过监视更改变量并将其更改为html

<p>{{customer.creditsLeft}}</p>

和Vue

data() {
   customer: {},
 }
 watch: {
 '$store.state.jobs.listBooking.customer': function (newVal) {
  this.customer.creditsLeft = newVal;
  console.log('current credit now' + this.customer.creditsLeft);
  return this.customer.creditsLeft;
 }
},

console.log正在运行，但是creditsLeft仍然没有改变。我是Vue的新人。请帮助我

Answer 1

如果要向客户对象添加新属性，则需要使用set，否则它不是被动的。

this.$set(this.customer, 'creditsLeft', newVal)

https://vuejs.org/v2/guide/reactivity.html

或者您可以预先设置它，所以您不需要使用set

data() {
   customer: {
      creditsLeft: 0
   },
}