Vue 2 - 입력된 행의 합계

Vue 2 - 입력된 행의 합계

수량 및 가격 입력이 포함된 동적 테이블이 있으며 계산된 속성을 사용하여 각 열의 합계를 계산합니다.이제 총계(모든 소계 합계의 합)를 계산하는 방법을 찾아야 합니다.

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/

저는 어떤 안내가 도움이 되기를 바랍니다.잘 부탁드립니다.

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

현용 바이올린 : https://jsfiddle.net/h5swdfv5/1/

언급URL : https://stackoverflow.com/questions/45425607/vue-2-calculate-total-of-rows-input