如何在vue-cli中更新数组的v-for循环中仅选定值的数据

Question

我创建了一个表，显示产品价格、数量、成本、总计。如果表行中任何产品的数量发生了变化，那么总计的值也必须根据公式数量*成本进行更新。products数组包含成本和名称。一切都很好，但我不知道的是，如果我正在更改一个产品的数量，v-for循环中的所有产品都会受到影响，所有产品的数量都在更改，而不是这样，我如何只更改更新产品的数量？我为所有产品提供了默认数量值0，因此只有数量超过0的产品才能用于我的进一步操作

## Html Code ## 
<table class="table table-striped">
<thead>
<tr>
<td>S.No#</td>
<td>Product</td>
<td>Cost</td>
<td>Quantity</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr v-for="p in products">
<td>1</td>
<td>{{p.item}}</td>
<td>{{p.cost}}</td>
<td><input type="number" class="form-control qty-box" name="" v-model='qty'></td>
<td>{{p.cost*qty}}</td>
</tr>
</tbody>
</table>
## Vue Js code ##
<script>
export default {
name: 'app',
data () {
return {
counter:8,
qty:0,
products:[
{'item':'timber','cost':250,'id':1},
{'item':'wood','cost':240,'id':2},
{'item':'primer','cost':120,'id':3},
{'item':'plywood','cost':360,'id':4},
{'item':'marker','cost':220,'id':5},
{'item':'roughwood','cost':480,'id':6},
],
msg: 'Counter',
}
}
}
</script>

Answer 1

不能对所有行使用一个数字。

<table class="table table-striped">
<thead>
<tr>
<td>S.No#</td>
<td>Product</td>
<td>Cost</td>
<td>Quantity</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr v-for="p in products">
<td>1</td>
<td>{{p.item}}</td>
<td>{{p.cost}}</td>
<td><input type="number" class="form-control qty-box" name="" v-model='p.qty'></td>
<td>{{p.cost*p.qty}}</td>
</tr>
</tbody>
</table>

因此，不使用v-model='qty'使用v-model='.pqty'，也不使用{{p.cost*qty}}使用{{p.cost*p.qty}}

Answer 2

按照我在codepen中的例子或下面的代码：

HTML:

<table id="app" class="table table-striped">
<thead>
<tr>
<td>S.No#</td>
<td>Product</td>
<td>Cost</td>
<td>Quantity</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr v-for="p in products">
<td>1</td>
<td>{{p.item}}</td>
<td>{{p.cost}}</td>
<td><input type="number" class="form-control qty-box" name="" v-model='p.qt'></td>
<td>{{p.cost*p.qt}}</td>
</tr>
</tbody>
</table>

JavaScript:

vue = new Vue({
el: "#app",
name: 'app',
data () {
return {
counter:8,
products:[
{'item':'timber','cost':250,'id':1, 'qt':1},
{'item':'wood','cost':240,'id':2, 'qt':1},
{'item':'primer','cost':120,'id':3, 'qt':1},
{'item':'plywood','cost':360,'id':4, 'qt':1},
{'item':'marker','cost':220,'id':5, 'qt':1},
{'item':'roughwood','cost':480,'id':6, 'qt':1},
],
msg: 'Counter',
}
}
});

一个小建议：就我个人而言，我认为在HTML和Vue中使用v-text比括号更好，因为当使用括号时，页面会在vue解析之前显示这些内容，这不是很好看。依我拙见

Answer 3

为每个产品添加数量。现在所有产品都有一个数量值。