[Vuejs]-Vuejs2 get value from multi inputs with same model name

by

1👍

✅

Think of each item in the arrayresults array as a model, then in your input, you update the particular model model='arrayresult.qty'.

You then can use computed properties to get the totals.

For example:

//
var vm = new Vue({
  el: '#app',
  computed: {
    totalQty: function () {
      var total = 0;
      this.arrayresults.forEach(item => {
        total += Number(item.qty);
      })
      return total
    },
    totalPrice: function () {
      var total = 0;
      this.arrayresults.forEach(item => {
        total += Number(item.item_smallest_unit_selling_price * item.qty);
      })
      return total
    }
  },
  data() {
    return {
      arrayresults:[
        {id: 1, item_desc_ar: 'A', item_smallest_unit_selling_price: 5, qty:1},
        {id: 2, item_desc_ar: 'B', item_smallest_unit_selling_price: 10, qty:1},
        {id: 3, item_desc_ar: 'C', item_smallest_unit_selling_price: 15, qty:1},
        {id: 4, item_desc_ar: 'D', item_smallest_unit_selling_price: 20, qty:1},
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

<div id="app">
  Total Qty: {{totalQty}}<br>
  Total Price: {{totalPrice}}

  <table>
    <tr v-for="arrayresult , key in arrayresults">
        <td>@{{ arrayresult.item_desc_ar}}</td>
        <td><input class='form-control quantity' type='text' v-model='arrayresult.qty'/></td>
        <td>@{{ arrayresult.item_smallest_unit_selling_price}}</td>
        <td><a class='fa fa-trash' @click='deleteItem(arrayresult.id,key)'></a></td>
    </tr>
  </table>
</div>

p.s: also try avoid item_, if you think of each model in an items array as an item you dont need to include item in the property name.

👤Lawrence Cherone

2👍

You need to use object property as v-model for each input.

<input ... v-model="quantities[input_id_iterator]" />

Do not forget to define quantities object in data.

👤Andrii

Leave a comment