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

我有一个使用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>

---

现在，我有了一个名为

changeQuantity

的方法，我需要在键入模型名称quantity的输入时将值和键索引发送到方法

changeQuantity

我的问题是，它们是许多具有相同模型名称的输入

数量

谢谢

您需要使用对象属性v型用于每个输入

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

---

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

对于每个输入，您需要使用对象属性作为v-model

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

---

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

将

arrayresults

数组中的每个项目都视为一个模型，然后在输入中更新特定的模型

model='arrayresult.qty'

然后，您可以使用计算属性来获取总数

例如：

//
var vm=新的Vue({
el:“#应用程序”，
计算：{
totalQty:函数（）{
var合计=0；
this.arrayresults.forEach（项=>{
总数+=数量（项目数量）；
})
返回总数
},
totalPrice:function（）{
var合计=0；
this.arrayresults.forEach（项=>{
合计+=数量（项目.项目\最小单位\售价*项目.数量）；
})
返回总数
}
},
数据（）{
返回{
阵列结果：[
{id:1，项目描述：'A'，项目最小单位销售价格：5，数量：1}，
{id:2，项目描述：'B'，项目最小单位销售价格：10，数量：1}，
{id:3，项目描述：'C'，项目最小单位销售价格：15，数量：1}，
{id:4，项目描述：'D'，项目最小单位销售价格：20，数量：1}，
]
}
}
});

总数量：{{totalQty}}

总价：{{totalPrice}}
@{{arrayresult.item_desc_ar}
@{{arrayresult.item_最小单位_售价}
将
arrayresults
数组中的每个项目视为一个模型，然后在输入中更新特定模型
model='arrayresult.qty'

然后，您可以使用计算属性来获取总数

例如：


//
var vm=新的Vue({
el:“#应用程序”，
计算：{
totalQty:函数（）{
var合计=0；
this.arrayresults.forEach（项=>{
总数+=数量（项目数量）；
})
返回总数
},
totalPrice:function（）{
var合计=0；
this.arrayresults.forEach（项=>{
合计+=数量（项目.项目\最小单位\售价*项目.数量）；
})
返回总数
}
},
数据（）{
返回{
阵列结果：[
{id:1，项目描述：'A'，项目最小单位销售价格：5，数量：1}，
{id:2，项目描述：'B'，项目最小单位销售价格：10，数量：1}，
{id:3，项目描述：'C'，项目最小单位销售价格：15，数量：1}，
{id:4，项目描述：'D'，项目最小单位销售价格：20，数量：1}，
]
}
}
});

总数量：{{totalQty}}

总价：{{totalPrice}}
@{{arrayresult.item_desc_ar}
@{{arrayresult.item_最小单位_售价}
无需担心，您可能还希望通过验证将强制值添加到int，但您得到了想法。无需担心，您可能还希望通过验证将强制值添加到int，但您得到了想法。