computedのクラス分け

Question

前提・実現したいこと

computedでクラス分けしたい。(1000円以上からご購入いただけます。の部分)

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

computed内の、エラーが表示されるにはerror: !this.canBuyとなるはずがerror: this.canBuyで動いているのがなぜかわからず。

該当のソースコード

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

<script>
  computed: {
    canBuy() {
      return function (item) {
        return item.total > 1000
      }
    },
    errorMessageClass() {
      return {
        error: this.canBuy
      }
    }
  },
</script>

試したこと

特に試したことがあるわけではないのですが、 error: this.canBuyだと作動しているのがなぜかさっぱりわからずという状況です。

Comments

[mike2mike4]

v-if か、if文が必要なはずですが、それがないのでそのまま最後まで行っているのでは？

[jkla444]

<span :class="errorMessageClass" v-show="!canBuy(item)">
の部分でv-showで条件分けしていると思うのですが...これはv-ifにしても変わりませんでした。

[mike2mike4]

1000円という条件がどこにもありませんので当然動きません。

Answer 1

canBuy には引数 item が必要です。
errorMessageClass から canBuy を呼び出す際にも item が必要です。
なので、errorMessageClass も引数 item を受け取れるよう関数にする必要があります。

また、括弧がなく単に this.canBuy とすると、
function が返ってくるので、結果に関係なく true になります。

サンプル