Q:

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

Here are my input fields:
<input v-model="form.sale_quantity" @change="computed" type="number" class="form-control" name="sale_quantity" id="sale_quantity" placeholder="Quantity">

<input v-model="form.sale_rate" @change="computed" type="number" step="any" class="form-control" name="sale_rate" id="sale_rate" placeholder="Rate">

<input v-model="form.sale_total" type="number" step="any" class="form-control" name="sale_total" id="sale_total" placeholder="Total Price">

I am using on change method to check whether the two input fields have some values and then calculate them.
data() {
    return {                
        form: new Form({
            sale_quantity: '',
            sale_rate: '',
            sale_total: '',
        })
    }
},
methods: {              
    computed() {
        //computation here
    }
}

So what should be my computed() method to check the input fields and calculate them to fill in the third input field?

A:

if you really want to keep your form object you'll need to write your own event handler instead of using v-model
https://jsfiddle.net/575dtfqz/1/
<input :value="form.sale_quantity" @change="updateQuantity" type="number" class="form-control" name="sale_quantity" id="sale_quantity" placeholder="Quantity">
<input :value="form.sale_rate"  @change="updateRate" type="number" step="any" class="form-control" name="sale_rate" id="sale_rate" placeholder="Rate">
<input v-model="form.sale_total" type="number" step="any" class="form-control" name="sale_total" id="sale_total" placeholder="Total Price">

javascript:
methods: {
    updateQuantity(event) {
        this.form.sale_quantity = event.target.value
        this.form.sale_total = this.form.sale_quantity * this.form.sale_rate
    },
    updateRate(event) {
        this.form.sale_rate = event.target.value
        this.form.sale_total = this.form.sale_quantity * this.form.sale_rate
    }
}

