Question

我有一个vue js项目，它就像一辆手推车。我想计算每一行产品的小计。

我的HTML代码：

<div id="app">
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>title</th>
        <th>price</th>
        <th>quantity</th>
        <th>subtotal</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="product in products" :key="product.id">
        <td>{{ product.id }}</td>
        <td>{{ product.title }}</td>
        <td>{{ product.price }}</td>
        <td><input type="number" v-model="product.quantity"></td>
        <td>{{ product.subtotal }}</td>
    </tr>
    </tbody>
</table>
</div>

我的js代码是：

var app = new Vue({
    el: '#app',
    data: {
        products: [
            {
                "id": 1,
                "title": "first",
                "price": 151,
                "quantity": 0,
                "subtotal": 0
            },
            {
                "id": 2,
                "title": "second",
                "price": 152,
                "quantity": 0,
                "subtotal": 0
            },
            {
                "id": 3,
                "title": "another record",
                "price": 0,
                "quantity": 0,
                "subtotal": 0
            },
            {
                "id": 4,
                "title": "hello",
                "price": 0,
                "quantity": 0,
                "subtotal": 0
            },
            {
                "id": 5,
                "title": "world",
                "price": 0,
                "quantity": 0,
                "subtotal": 0
            }
        ]
    },
    computed:{
        'product.subtotal': function(){
            return product.quantity * product.price;
        }
    }
});

如何通过更改数量来计算任何产品的小计？我想将计算的小计保存到product.subtotal属性。

这里是jsfiddle链接： https://jsfiddle.net/s38wLk49/

Answer 1

错误（嗯，不完整）：不会将{{ product.subtotal }}更改为{{ product.price * product.quantity }}吗？

由于他想要实际更改数据，而不仅仅是显示，这是我尝试过的，它对我有用：

watch:{
  products:{
   handler:function(newval,oldval) {
      this.products.forEach(p => {
          p.subtotal = p.price * p.quantity;
      });
   }, deep:true
  }
}

Vue支持观看对象的属性，但afaik，它不能与数组对象一起使用（我可能错了！）。

Answer 2

编写一个方法，它将为此提供完美的解决方案。

// replace your subtotal <td> with this below

<td>{{ productSubtotal(product.price, product.quantity) }}</td>

// under methods you should write that method to calculate subtotal

methods: {
  productSubtotal(price, quantity) {
    return price * quantity;
  }
}

在vue.js中计算小计

2 个答案: