vue.js updating input box with input from another input

Question

I am working on a converter, where I type a number in one box, and it converts and outputs its conversion into another box. For this example, I am using temperatures. The code does what I would expect it to, however, it only does it after the input box loses focus.

For example, if I have a 20 in the first box, I would have a conversion of 20 in the second box. If I delete the 0 in the first box, I would expect it to instantly update in the second box. However as it stands, only after I click into the second box does it update.

<template>
  <div id="app">
    <form id='calculate'>
    <label>Centigrade
      <input id='c' v-model.number='cent' type='number' @change='validate()'>
    </label>
    <label>Fahrenheit
      <input id='f' v-model.number='fahren' type='number' @change='validate()'>
    </label>
  </form>
<!--     {{calculateCentigrade}}
    {{calcuateFahrenheit}} -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      //(F − 32) × 5/9
      //(C × 9/5) + 32
      cent: 20,
      fahren: 68,   
    };
  },
  computed: {
    calculateCentigrade(){
      return ((this.fahren-32)*(5/9)).toFixed(2)
    },
    calcuateFahrenheit(){
      return ((this.cent*(9/5))+32).toFixed(2)
  
}
  },
  methods: {
    validate(){
      if(event.target.id === 'f'){
        this.cent = ((this.fahren-32)*5/9).toFixed(2)
      }
      else{
        this.fahren = ((this.cent*9/5)+32).toFixed(2)
      }
    }
  }
};
</script>

working example: https://codepen.io/PaulRC/pen/WNoqbXY

I thought that it might be that I needed to use computed and if you uncomment this section  you would see that the compute model runs when the inputs are changed.

Boussadjra Brahim · Accepted Answer · 2021-03-19 12:31:18Z

1

Try to use a watcher property and the binding using v-model :

<template>
  <div id="app">
    <form id='calculate'>
    <label>Centigrade
      <input  v-model.number='cent' type='number'>
    </label>
    <label>Fahrenheit
      <input  v-model.number='fahren' type='number' >
    </label>
   </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cent: 20,
      fahren: 68,   
    };
  },
  watch:{
    cent(newVal){
      this.fahren=((newVal*(9/5))+32).toFixed(2)
    },
      fahren(newVal){
      this.cent=((newVal-32)*5/9).toFixed(2)
    },
  }
};
</script>

answered Mar 19, 2021 at 12:31

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

2 Comments

Paul Carlson Over a year ago

This is the way that I was just thinking actually. However, it does not like multiple digits. For example, if I try to type '78' it will only take the '7' because then it will start the converting.

Tim Over a year ago

@PaulCarlson In your question you seem to be complaining that your current code is NOT instantly converting when you remove a digit (due to using change event instead of input event), but now with this solution you are complaining that the code IS instantly converting when you enter a new digit. Possibly rethink your design or what your ultimate goal is. You may want to add a 'convert' button and handler so that the conversion doesn't happen until the user is ready.

Collectives™ on Stack Overflow

vue.js updating input box with input from another input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related