Vue.jsでリストの合計値を算出したい

Question

前提・実現したいこと

Vue.jsのv-forでリストを表示しています。
そのリスト内に金額があり、その合計をしたいと思っています。

発生している問題・エラーメッセージ

v-for内で金額の合計をし、最後に合計欄に出力することはできないのでしょうか。

該当のソースコード

以下のようなイメージです。
moneyAとmoneyBの合計値をforループ後にtotalMoneyAとtotalMoneyBに表示させたい。
ちなみにlistは動的に変更されることがあります。

<template>
  <table>
    <template v-for="(item, idx) in list">　<!-- ←　1回目のループ -->
      <tr>
        <td>{{ item.moneyA }}</td>
        <td>{{ item.moneyB }}</td>
      </tr>
    </template>
    <!-- 合計欄 -->
    <tr>
        <td>{{ totalMoneyA }}</td>
        <td>{{ totalMoneyB }}</td>
    </tr>
  </table>
</template>

試したこと

computed内でリストを合計し、表示させることはできたのですが、
それだとリストの表示で1回、computedで2回と合計で3回リストのループが発生します。
listが大きくなってくると表示速度に支障が出てくるのかなと思っています。

export default {
  data () {
    return {
      list: [],　// ←　後でajaxで値が入ります
    }
  },
  computed: {
    totalMoneyA() {
      let sum = 0;
      for (const item of this.list) {　// ←　2回目のループ
        sum += Number(item.moneyA);
      }
      return sum;
    },
    totalMoneyB() {
      let sum = 0;
      for (const item of this.list) {　// ←　3回目のループ
        sum += Number(item.moneyB);
      }
      return sum;
    },
  },
}

最悪これでいくかもしれませんが、v-forの1回のループで処理できたらスマートなのかなと思いました。

以上、ご教授よろしくお願いいたします。

Answer 1

1回のループで処理できたらスマートなのかなと思いました。

それをやるならリストにデータを入れるタイミングで計算して、別に値を持っておくべきでは。

どのぐらいの件数を想定しているのかわかりませんが、２回回すと表示速度に支障が出るレベルなら、あらかじめ計算済みの値を作ってから表示させるべきであって、View側で計算をしようとするのは間違いだと思います。

Comments

[tampopopofu]

ご回答ありがとうございます。
そうですね。表示速度に支障が出るレベルならサーバ側で合計結果を返すほうがいいですね。
v-forでループしているので、そこでついでに計算できたらと思いまして。
phpとかjspみたいにちょこっと変数を用意して計算出来たらいいのですが…。
こういう相談ができて良かったです。

Answer 2

このように書けば処理できます。

このケースであればcomputedではなくmethodsを使用するべきです。
あと←　後でajaxで値が入りますなどはコメントアウトしましょう。
コードが実行できなくなるので最悪です。

<template>
  <table>
    <template v-for="(item, index) in list">
      <tr>
        <td>{{ item.moneyA }}</td>
        <td>{{ item.moneyB }}</td>
      </tr>
      <tr v-if="index === list.length - 1">
        <td>{{ totalMoney('A') }}</td>
        <td>{{ totalMoney('B') }}</td>
      </tr>
    </template>
  </table>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      list: [
        {moneyA: 1000, moneyB: 4000},
        {moneyA: 2000, moneyB: 5000},
        {moneyA: 3000, moneyB: 6000},
      ]
    }
  },
  methods: {
    totalMoney(type) {
      let sum = 0;
      for (const item of this.list) {
        if (type === 'A') {
          sum += +item.moneyA;
        } else if (type === 'B') {
          sum += +item.moneyB;
        }
      }
      return sum;
    }
  }
}
</script>

Comments

[tampopopofu]

ご回答ありがとうございます。
コメントアウトの件はすみませんでした。以後気を付けます。

教えていただいた通りで実現しました。
listが変更されてもしっかりと合計値も再計算されてます。
ありがとうございました！

<tr v-if="index === list.length - 1">
↑この部分が思いつきませんでした。