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

Question

我创建了一个显示产品价格、数量、成本、总计的 table 如果 table 行中任何产品的数量发生变化，总计的值也必须根据配方数量*成本。产品数组包含成本并且 name.Everything 工作正常但我不知道是否我正在更改一种产品的数量 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

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

Answer 2

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

    <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='p.qty' 也不要使用 {{p.cost*qty}} 使用 {{p.cost*p.qty}}

Answer 3

按照我在 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 解析它之前显示这些内容，这不是很漂亮。恕我直言。

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

how to update data of only selected value from v-for loop of array in vue-cli

vue.js

vue-cli