CODEWITHSUNDEEP
javascriptvue.jswatch
李明洋
李明洋

Reputation: 561

VueJS: watching two properties

Suppose I have two data properties:

data() {
  return {
    a: false, 
    b: false, 
  }
}

When a and b become true at the same time, I want to carry out a related task.

How can I use a watch method in Vue to achieve this?

Upvotes: 14

Views: 14596

Answers (2)

Bert
Bert

Reputation: 82489

Watch a computed value.

computed:{
    combined(){
        return this.a && this.b
    }
}
watch:{
    combined(value){
        if (value)
            //do something
    }
}

There is a sort of short hand for the above using $watch.

vm.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // do something
  }
)

Upvotes: 29

Mehdi Bourahla
Mehdi Bourahla

Reputation: 147

It's pretty much the same solution as @Bert suggested. But you can just do the following:

data() {
  return {
      combined: {
          a: false, 
          b: false, 
      }
  }
},

Then:

watch: {
    combined:{
        deep:true,
        handler
    }
}

Upvotes: 0

Related Questions