Mutually affected Vue js watch functions trigger infinite loop

Question

I've made multiple Vue watch fucntions affected each other. But It doesn't seem to operate as I intended.

When a user tab 'vinput01' and change, vinput02 change under only vinput01 functions. And When a user tab 'vinput02' and change value, 'vinput02' change only under vinput02 functions.

But now, my Code trigger infinite loop. Changing 'vinput01' affects 'vinput02' and 'vinput02' affects 'vinput01' at the same time.

Here is my Code. How can I avoid this problem??

data () {
  return {
   vinput01: '',
   vinput02: '',
  }
},
watch: {
 vinput01: function(_val) {
 this.vinput02 = _val *1.1
},
 vinput02: function(_val) {
 this.vinput01 = _val / 1.1
}

tony19 · Accepted Answer · 2022-07-15 21:18:34Z

4

You need to have one property which is the 'source of truth'. Your problem really is that you have two values competing for this. To do this you can set one of your properties to be the primary value and the other as a computed property with a getter and setter. A good article about this can be found here, and in the excellent vuejs docs here.

Example code:

data(){
  return {
    vinput01:0,
  }
},
computed: {
  vinput02: {
    get: function(){
      return this.vinput01 * 1.1;
    },
    set: function(_val){
      this.vinput01 = _val / 1.1;
    }
  }
}

edited Jul 15, 2022 at 21:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 18, 2019 at 10:45

Euan Smith

2,1921 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Mutually affected Vue js watch functions trigger infinite loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related