Vue.jsをはじめてみます⑤ 〜computed

Vue.jsをはじめて勉強中です。

前回はVue定義のオプションでfiltersについて触った感じです。

今回はcomputedに触れていきサンプルコードと説明をもとにまた記事にしていきたいと思います。

ちなみに参考にする購入した書籍はこちら。

computedというオプションはデータを処理して表示するなどをするときに使う。

例えば、

var items = [

  {

    name: '商品１',

    price: 300,

    quantity: 1

  },

  {

    name: '商品２',

    price: 400,

    quantity: 2

  }

]

var vm = new Vue({

  el: '#app',

  data: {

    items: items

  },

  filters: {

    numberWithDelimiter: 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)

    },

    totalPriceWithTax: function () {

      // 算出プロパティに依存した算出プロパティも定義できる

      return Math.floor(this.totalPrice * 1.08)

    },

  }

})

itemsをこんな感じで定義して、computedを合計金額と税込金額を算出する関数を定義します。

表示は以下です。

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">

  <p>小計: {{ totalPrice | numberWithDelimiter }}円</p>

  <p>合計(税込): {{ totalPriceWithTax | numberWithDelimiter }}円</p>

</div>

itemsのpriceを合計して小計をtotalPriceでは出しています。

合計（税込）は、totalPriceWithTaxを呼ぶと、totalPriceが実行され算出された値に1.08を掛けて税込価格を算出、そのデータを３桁のカンマ区切りで表示するようにしている感じですね。

今回はcomputedを試行してみました。