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

Question

我创建了一个表格，显示产品价格、数量、成本、总计如果表格行中任何产品的数量发生变化，总计的值也必须根据公式数量 * 成本进行更新。产品数组包含成本和名称。一切正常，但我不知道如果我改变一种产品的数量，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='p.qty' 代替 v-model='qty' 并使用 {{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

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