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的方法@我需要在键入带有型号名称数量的输入时将值和键索引发送到方法changeQuantity我的问题是它们有很多具有相同型号名称的输入quantity谢谢

Answer 1

您需要将 object property 用作每个输入的 v-model。

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

不要忘记在数据中定义数量对象。

Answer 2

将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_，如果您将 items 数组中的每个模型视为一个项目，则不需要在属性名称中包含 item。