Vue.jsの:style="example"はどこで真偽の判定をしているのか？

Question

Vue.js入門という書籍をやっています。初歩的な質問です。

下記のソースコード内の <div :style="errorMsg"> で合計が1000円以下の時はテキストと線で赤く表示しているのですが、 <div :style="errorMsg"> で「合計が1000円以下」という判定は、どこから来ているのでしょうか？

見た感じだと

canBuy: function () {
return this.totalPrice >= 1000;
},

から判定しているのではないかというのはわかるのですが、なぜ canBuy での判定が自動的に <div :style="errorMsg"> にも反映されるのでしょうか？

もし推測自体も間違っている場合は、ご教示願います。

  <div id="app">
    <div :style="errorMsg">
      <p>{{ items[0].name}}：{{ items[0].price }} × {{ items[0].quantity }}</p>
      <p>小計：{{ totalPrice | numSep}}円</p>
      <p>合計：{{ totalPriceTax | numSep}}円（税込）</p>
      <p v-show="!canBuy">
        {{ 1000 | numSep}}円以上から購入できます。
      </p>
    </div>
  </div>

var items = [
  {
    name: "鉛筆",
    price: 300,
    quantity: 4,
  },
  {
    name: "ノート",
    price: 400,
    quantity: 0,
  },
  {
    name: "消しゴム",
    price: 500,
    quantity: 0,
  },
];

var vm = new Vue({
  el: "#app",
  data: {
    items: items,
  },
  filters: {
    numSep: function (value) {
      if (!value) {
        return "0";
      }
      return value.toString().replace(/(\d)(?=(\d{3})+$)/g, "$1,");
    },
  },
  computed: {
    totalPrice: function () {
      return this.items.reduce(function (sum, item) {
        return sum + item.price * item.quantity;
      }, 0);
    },
    totalPriceTax: function () {
      return Math.floor(this.totalPrice * 1.1);
    },
    canBuy: function () {
      return this.totalPrice >= 1000;
    },
    errorMsg: function () {
      return {
        border: this.canBuy ? "" : "1px solid red",
        color: this.canBuy ? "" : "red",
      };
    },
  },
});

Answer 1

computedはキャッシュを利用して値に変化があった場合のみ、定義済みの処理を実行してくれます。
ここではtotalPriceの値に変化があるたびにcanBuyの処理が実行され値が返却されます（return）。
errorMsgもcomputedに記載されているので、canBuyの値に変化があった場合に処理が実行されます。
結果<div :style="errorMsg">に値が入る様になります。

Comments

[退会済みユーザー]

返信遅くなり、すみません。
ご回答、有難うございます！！

理解することができました！！！

Answer 2

なぜ canBuy での判定が自動的に <div :style="errorMsg"> にも反映されるのでしょうか？

書籍に従って進めているという事なので、書籍でcomputedについて書かれているところを探してみてください。computedが理解できれば、この質問についても理解できるはずです。

Comments

[退会済みユーザー]

書籍のcomputed部分は何度も読み直しましたが、その部分の解説がないです、、、

[退会済みユーザー]

低評価を押した方、私の回答の何が低評価に値するのかについて具体的な理由を添えて返信して下さい。

[退会済みユーザー]

「評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。」とteratailに書かれています。具体的な理由が無いまま評価を下げる行為が2連続で行われました。非常に不快です。もう私はteratailで回答を行う気は無くなりました。退会申請を行います。