Search code examples
vue.jsredux

watch not update change vue

i'm try to change variable by watch and change it in to html 

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

and 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 is woking but creditsLeft still not change. i'm a new bie in vue . pls help me

Solution

  • If you want to add new property to customer object you need to use set, otherwise it's not reactive.

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

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

    Or you can set it before hand so you don't need to use set

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