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

您需要为每个输入使用对象属性作为 v模型。

<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数组中的每个模型都视为一个项目，则不需要在属性名称中包括该项目。

vuejs2从具有相同型号名称的多个输入中获取价值

2 个答案: