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

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

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',
    }
  }
});

一些建议：我个人认为，将v-text中的HTML与Vue一起使用比使用括号要好，因为使用括号时页面会显示在vue解析之前，它不是很漂亮。恕我直言。

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

3 个答案: