How to calculate two input values and put the result in another input field in Vue,js?

Question

Here are my input fields:

Answer 1

Although there already is an accepted answer and it works this is the perfect use case for computed property and it should be used instead of methods.

Below is the working example.

new Vue({
  el: "#el",
  data() {
    return {
      form: {
        sale_quantity: 0,
        sale_rate: 0,
        sale_total: 0
      }
    }
  },
  computed: {
    total: function() {
      let calculatedTotal = this.form.sale_quantity * this.form.sale_rate;
      this.sale_total = calculatedTotal;
      
      return calculatedTotal;
    }
  }
})

  
  
  
  

  Total: {{sale_total}}