Vue, JavaScriptでの計算関数の作成

Question

前提・実現したいこと

Vueで簡単な計算表を作成しています。

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

計算する、増やす、減らすを押すと全てに反応してしまい個別に計算できません。
v-forで個別に指定されているはずだと思っているのですが、なぜ個別に計算されないかご教授いただけますでしょうか...
また配列の中のオブジェクトを参照する際の動きがイマイチ理解できないのですが、参考になるサイトもご教授いただけますと幸いです。

該当のソースコード

    <div 
      v-for="(item, index) in items"
      :key="index">
        <p>{{item.name}} : {{item.price}} × {{item.quantity}} = {{item.total | numberWithDelimiter}}</p>
        <button @click="culc">計算する</button>
        <button @click="inc">増やす</button>
        <button @click="dec">減らす</button>
    </div>

  data() {
    return {
      res: "",
      items : [
        {
          name: '鉛筆',
          price: 300,
          quantity: 0,
          total: 0
        },
        {
          name: 'ノート',
          price: 400,
          quantity: 0,
          total: 0
        },
        {
          name: '消しゴム',
          price: 500,
          quantity: 0,
          total: 0
        },
      ]
    }
  },
  methods: {
    culc() {
      return this.items.reduce((sum, i) => sum * (i.total = i.price * i.quantity), 0);
    },
    inc() {
      return this.items.reduce((sum, i) => sum * (i.quantity += 1), 0);
    },
    dec() {
      return this.items.reduce((sum, i) => sum * (i.quantity -= 1), 0);
    }
  }

Answer 1

全部は敢えて記載しませんが、「増やす」の部分だけ。

<template>
  <div>
    <div v-for="item in items" :key="item.name">
        <p>{{item.name}} : {{item.price}} × {{item.quantity}} = {{item.total}}</p>
        <button @click="inc(item)">増やす</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Sample",
  props: {
    msg: String
  },
  data() {
    return {
      res: "",
      items : [
        {
          name: '鉛筆',
          price: 300,
          quantity: 0,
          total: 0
        },
        {
          name: 'ノート',
          price: 400,
          quantity: 0,
          total: 0
        },
        {
          name: '消しゴム',
          price: 500,
          quantity: 0,
          total: 0
        },
      ]
    }
  },
  methods: {
    inc(item) {
      item.quantity += 1;
    }
  }
};
</script>

• item を使って v-for をしているからと言っても関数から見ると何も指定されていないので呼び出された通りの処理を実行します。どの値について実行しようとしているか指定しましょう。
• v-for の key には（今回の場合は問題ないですが）配列の index を使うのを避けましょう。（こんな問題があります: https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316 )

何が起こっているのかわからないのであれば、わかりにくい処理を使うのをやめて、シンプルな処理から始めましょう。

Comments

[jkla444]

引数を渡せばよかったんですね...ありがとうございます。
またkeyについても追記ありがとうございます。参考にしてみます。

[mather]

ちなみに、シンプルなものであれば methods を書かなくても記述できます。
@click="item.quantity += 1"
と書けばいいだけですね。