Vue 2 - 入力された行の合計を計算する

Question

私は数量が&の動的な表を持ち、計算されたプロパティを使って各行の合計を計算します。 今、私は総額（すべての小計の合計）を計算する方法を見つける必要があります。

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を：

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

私は物事を明確にするために、小さなフィドルを提供します。

https://jsfiddle.net/h5swdfv5/

私はいくつかのガイダンスが私を助けることができることを願っています。 は、事前にありがとう

Answer 1

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

ワーキングフィドル：https://jsfiddle.net/h5swdfv5/1/