vue.jsで、連想配列の中身の合計を算出したい

Question

家計簿アプリを作成中です。
連想配列incomesの、お金の部分(income.imとしています）を合計した値を出したいのですが、うまくいきません。
「vue 連想配列　合計」等で調べて、reduce関数を用いてcomputedに処理を書いたのですが、income.imがただ並べられて表示されてしまいます。
どこが間違っているのかいまいちわからない状態です。
ご教示のほど、よろしくお願い致します。

<template>
  <div id="app">
    <header>ヘッダー</header>
    <div class="container">
      <main>
        <h2>収支</h2>
        {{sum}}
        <p>????年??月収支</p>
        <hr />
        <p>収入 ????円</p>
        <p>支出 ????円</p>
        <h1>ここにグラフが入ります</h1>
      </main>
      <div class="column">
        <div class="right">
          <h2>収入</h2>

          <p>
            日付：
            <input type="Date" v-model="incomeDate" />
          </p>
          <p>
            金額：
            <input type="Number" v-model="incomeMoney" />
          </p>
          <p>
            名目：
            <input type="text" v-model="incomeNominal" />
          </p>
          <button @click="addIncome">登録</button>
          <hr />
          <div v-for="income in incomes" :key="income.no">
            日付：{{income.id}} 金額：{{income.im}} 名目：{{income.in}}
            <button
              @click="deleteIncome(income)"
            >削除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      incomes: [],
      incomeDate: "",
      incomeMoney: "",
      incomeNominal: "",
      aaa: 0
    };
  },

  mounted() {
    if (localStorage.getItem("incomes")) {
      try {
        this.incomes = JSON.parse(localStorage.getItem("incomes"));
      } catch (e) {
        localStorage.removeItem("incomes");
      }
    }
  },
  methods: {
    addIncome() {
      if (this.incomeMoney === "" && this.incomeDate === "") {
        return;
      }
      this.incomes.push({
        id: this.incomeDate,
        im: this.incomeMoney,
        in: this.incomeNominal
      });
      this.save();
    },
    deleteIncome(income) {
      this.incomes.splice(this.incomes.indexOf(income), 1);
      this.save();
    },

    save() {
      const a = JSON.stringify(this.incomes);
      localStorage.setItem("incomes", a);
    }
  },
  computed: {
    sum() {
      const total = this.incomes.reduce((sum, i) => sum + i.im, 0);
      return total;
    }
  }
};
</script>

<style>
#app {
  width: 1000px;
  margin: 0 auto;
}
.container {
  display: flex;
}
.column {
  flex-direction: column;
}
main {
  flex: 1;
  height: 1000px;
}
.right {
  width: 450px;
  height: 500px;
}
</style>

Answer 1

ただ文字列で処理されてるんじゃ？

this.incomes.reduce((sum, i) => sum + Number(i.im), 0);

Comments

[fork_]

ありがとうございます！おっしゃる通りでした。。
ちなみなのですが、どのような調べ方をすれば、回答者様の答えに行き着きますでしょうか??

[sousuke]

111+111=222ですが'111'+'111'='111111'っていうのは割と基礎だと思います…。
答えが「222」になると予想し、実際「111111」になっているのを見て「なぜそうなっているのか」を
考えることが大事だと思います。

もう少し突っ込めば私は質問者さんがネットで拾ったreduceを使って合計を出すことに
あまり賛成できません。for文使ったりして自分で納得した範囲でコードを書いたほうがいいと思います。

[fork_]

詳細にご説明いただきありがとうございます。
予想外の動きをした時に、焦らず考えることが大事ということですね。。
for文で出す方法も、じっくり考えて実装してみます。ありがとうございました。