vuejs2 получить значение из нескольких входов с одинаковым названием модели

Question

у меня есть проект, работающий с vuejs2 это мой HTML-код

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

и это мой код vuejs2

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

    },
    deleteItem:function(key)
    {

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

теперь у меня есть этот метод с именем changeQuantity, который мне нужен, когда keyup при вводе с именем модели количество отправляет значение и индекс ключа в метод changeQuantity моя проблема в том, что они много вводятся с одним и тем же именем модели quantity спасибо

Answer 1

Думайте о каждом элементе в массиве arrayresults как о модели, а затем при вводе данных вы обновляете конкретную модель model='arrayresult.qty'.

Затем вы можете использовать вычисленные свойства для получения итогов.

Например:

//
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: также старайтесь избегать item_, если вы рассматриваете каждую модель в массиве элементов как элемент, вам не нужно включать элемент в имя свойства.

Answer 2

Вам необходимо использовать свойство объекта как v-модель для каждого входа.

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

Не забудьте определить количество объектов в данных.