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

user_7137658 0
Viewed 13265

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?

vue.js
4 Answers

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

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>

user_6216650

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/

user_39940530

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

user_41917160
Related