CODEWITHSUNDEEP
vue.js
zahid hasan emon
zahid hasan emon

Reputation: 6233

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?

Upvotes: 5

Views: 15817

Answers (4)

cwang
cwang

Reputation: 1104

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

Upvotes: 7

Vladimir Salguero
Vladimir Salguero

Reputation: 5947

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

Upvotes: 3

Javier J Solis Flores
Javier J Solis Flores

Reputation: 187

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/

Upvotes: 2

wegelagerer
wegelagerer

Reputation: 3710

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>

Upvotes: 5

Related Questions