CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Awar Pulldozer
Awar Pulldozer

Reputation: 1101

vuejs2 get value from multi inputs with same model name

i have project working with vuejs2 this is my html code

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

and this is my vuejs2 code

data:{
    message:'', 
    item_search_array:false,
    arrayresults:[],
    total:0,
    quantity:1,
},
methods:{
    changeQuantity:function()
    {

    },
    deleteItem:function(key)
    {

        this.arrayresults.splice(key, 1);
    }
}

now i have this method called changeQuantity i need when keyup the input with model name quantity send the value and the key index to the method changeQuantity my problem thats they are many input with same model name quantity thanks

Upvotes: 0

Views: 1402

Answers (2)

Lawrence Cherone
Lawrence Cherone

Reputation: 46610

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.

Upvotes: 1

Andrii
Andrii

Reputation: 166

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.

Upvotes: 2

Related Questions