In my Vue file (version 2.x), I have three fields - input1 x input2 = result.
Whenever one of these fields is changed, the other two should update simultaneously. I attempted to use the watch property but it resulted in an infinite loop as the watchers kept triggering each other.
Is there a Vue helper that I am overlooking in this scenario? Any assistance would be greatly appreciated.
Please see the example code below:
<template>
<input v-model="input1"></input>
<input v-model="input2"></input>
<input v-model="conversionRate"></input>
</template>
<script>
export default {
data() {
input1: null,
input2: null,
conversionRate: null
},
watch: {
input1() {
this.input2 = this.input1 * this.conversionRate
},
input2() {
this.input1 = this.input2 * this.conversionRate
},
conversionRate() {
this.input2 = this.input1 * this.conversionRate
}
}
}
</script>