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

I tried to do the same thing, trying a little bit in my case it worked for me :)

<input v-model="form.sale_quantity">

<input v-model="form.sale_rate" >

<input :value="form.sale_quantity*form.sale_rate" placeholder="Total Price">

https://jsfiddle.net/575dtfqz/64/

Answer 2

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
    }
}

Answer 3

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;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="el">
  <input v-model="form.sale_quantity" type="number" class="form-control" name="sale_quantity" id="sale_quantity" placeholder="Quantity">
  <input v-model="form.sale_rate" type="number" step="any" class="form-control" name="sale_rate" id="sale_rate" placeholder="Rate">
  <input :value="total" type="number" step="any" class="form-control" name="sale_total" id="sale_total" placeholder="Total Price">
  <br>
  Total: {{sale_total}}
</div>

Answer 4

I needed to operate several rows and had problems with the index of each control, this example helped me a lot to solve this problem

HTML

<div id="app">
<table>
<thead align="left">
  <th>Quantity</th>
  <th>Price</th>
  <th>Subtotal</th>
</thead>
<tbody>
    <tr v-for="(item, index) in items">
      <td><input v-model.number="item.qty" size="10"></td>
      <td><input v-model.number="item.price" size="10"></td>
      <td><input v-model.number="subtotalRow[index]" readonly size="10"></td>
      <td><button @click="addRow(index)">+</button></td>
      <td><button @click="removeRow(index)">-</button></td>
   </tr>
   <tr>
     <td><strong>Total</strong></td>
     <td>{{total}}</td>
   </tr>
 </tbody>
 </table>
 </div>

JavaScript (vue.js)

var app = new Vue({
el: '#app',
  data: {
    // dummy data
    items: [
    {qty: 5, price: 25 },
    {qty: 2, price: 16 },
    {qty: 8, price: 320 },
    {qty: 3, price: 88 }
    ],
  },
  computed: {
    subtotalRow() {
      return this.items.map((item) => {
        return Number(item.qty * item.price)
      });
    },
    total() {
      return this.items.reduce((total, item) => {
        return total + item.qty * item.price;
      }, 0);
    }
},
methods: {
    addRow(index) {
        this.items.splice(index + 1, 0, {
        qty: 1,  price: 0
        });
    },
    removeRow(index) {
        this.items.splice(index, 1);
    }
  }  
});

See the example in https://jsfiddle.net/h5swdfv5/1/

Answer by smarx https://stackoverflow.com/a/45425666/4191716