v-for利用時のcomputedによる監視

Question

前提・実現したいこと

v-forを利用したループ表示をしたときにcomputedを利用して別々にエラーメッセージ(1000円以上から〜)が表示されるようにしたい。

発生している問題

おそらくcomputedが作動していない(？)計算して合計を出しても変化がない。

該当のソースコード

<template>
    <section>
      <div v-for="(item, i) in items" :key="i">
        <p>
          {{ item.name }} : {{ item.price }} × {{ item.quantity }} =
          {{ item.total | numberWithDelimiter }} (税込
          {{ item.totalTax | numberWithDelimiter }})
        </p>
        <button @click="culc(item)">計算する</button>
        <button @click="inc(item)">増やす</button>
        <button @click="dec(item)">減らす</button>
        <button @click="totalClear(item)">クリア</button>
        <p v-bind:class="errorMessageClass" v-show="!canBuy">
          1000円以上からご購入いただけます。
        </p>
      </div>
    </section>
</template>

<script>
export default {
  data() {
    return {
      res: "",
      items: [
        {
          name: "鉛筆",
          price: 300,
          quantity: 0,
          total: 0,
          totalTax: 0,
        },
        {
          name: "ノート",
          price: 400,
          quantity: 0,
          total: 0,
          totalTax: 0,
        },
        {
          name: "消しゴム",
          price: 500,
          quantity: 0,
          total: 0,
          totalTax: 0,
        },
      ],
    };
  },
  computed: {
    canBuy() {
      return this.totalPrice >= 1000
    },
    errorMessageClass() {
      return {
        error: !this.canBuy
      }
    }
  },
}
</script>

試したこと

返り値を関数にしてみましたがそうするとメッセージの文言(1000円以上から〜)が表示されなくなりました。

Answer 1

引数にitemを指定します

v-show="!canBuy(item)"

computed では function を返します

computed: {
  canBuy () {
    return function (item) {
      return item.total > 1000
    }
  }
}

サンプル

Comments

[jkla444]

あーー冷静に考えたらそうですよね、、ありがとうございます！