Vue 2 - 计算输入的总行数 [英] Vue 2 - Calculate total of rows input

问题描述

我有一个带有数量和的动态表价格输入，我使用计算属性来计算每行的总数.现在我需要找到一种方法来计算总计(所有小计的总和).

I have a dynamic table with a quantity & price input, and I use a computed property to calculate each row's total. Now I need to find a way to calculate the grandtotal (sum of all subtotals).

HTML:

   <tr v-for="(item, index) in items">
      <td><input v-model.number="item.qty" size="10"></td>
      <td><input v-model.number="item.price" size="10"></td>
      <td><input v-model.number="subtotalRow[index]" readonly size="10"></td>
      <td><button @click="addRow(index)">+</button></td>
      <td><button @click="removeRow(index)">-</button></td>
   </tr>
   <tr>
      <td>Total: {{total}}</td>
   </tr>

Javascript:

Javascript:

computed: {
    subtotalRow() {
      return this.items.map((item) => {
        return Number(item.qty * item.price)
      });
    },
    // the index part is confusing me
    //
    // total() {
    //  return this.items.reduce((total, ?) => {
    //    return total + ?;
    //  }, 0);
    //}
},

我提供了一个小小提琴来说明问题.

I provided a small fiddle to make things clear.

https://jsfiddle.net/h5swdfv5/

我希望一些指导可以帮助我.提前致谢

I hope that some guidance can help me. Thank you in advance

推荐答案

total() {
  return this.items.reduce((total, item) => {
    return total + item.qty * item.price;
  }, 0);
}

工作小提琴:https://jsfiddle.net/h5swdfv5/1/

这篇关于Vue 2 - 计算输入的总行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！