0

Let's say I have two input tags (type number) where each one of them has a specific value (one starts in 0 and the other in 1000), and when I change the value of the first, for example from 0 to 200, the other one should change dynamically to the contrary respective value, in this case, 800.

input1 = 0 --> if change to 200 input2 = 1000 --> this changes to 800

All this must be done in Vue js. Please if someone can help me I'll be very thankful.

Nikola Pavicevic
  • 21,952
  • 9
  • 25
  • 46
Rafael Oviedo
  • 9
  • 5
  • https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-values – epascarello Aug 05 '21 at 18:11
  • Does this answer your question? [How can I detect when a variable changes value in JavaScript?](https://stackoverflow.com/questions/47887447/how-can-i-detect-when-a-variable-changes-value-in-javascript) – lejlun Aug 05 '21 at 18:12
  • Well, I guess maybe can work, but since I need to do it in Vue I think the approach really doesn't help me. – Rafael Oviedo Aug 05 '21 at 18:23

2 Answers2

1

If i correctly understand what you need, you can use computed:

new Vue({
  el: '#app',
  data: {
    num: null
  },
  computed: {
    num2() {
      return this.num ? Number(this.num) + 800 : null;
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="num">
  <input type="number" v-model="num2" disabled>
</div>
Nikola Pavicevic
  • 21,952
  • 9
  • 25
  • 46
1

You can use watcher to see changes on both data and update accordingly.

new Vue({
  el: '#app',
  data: {
    base: 1000,
    min: 0,
    max: 1000,
  },
  watch: {
    min: function(val) {
      this.max = this.base - val;
    },
    max: function(val) {
      this.min = this.base - val;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" id="min" v-model="min">
  <input type="number" id="max" v-model="max">
</div>
Chanckjh
  • 2,587
  • 2
  • 22
  • 28