【Vue.js】算出プロパティのgetterとsetter

はじめに

こんにちは！
今回は【Vue.js】getterとsetterについてアウトプットしていきます！

getterとsetter

・cpmputed（プロパティ）・・・getter,setterが必要
・methods（メソッド）・・・getterのみ必要

getter=dataの値を取り出すのメソッド
setter=dataの値に代入するためのメソッド

書き方・解説

今回は税抜価格、税込価格の計算を例に解説していきます。

HTML

<p>
base price : <input type="text" v-model="basePrice">
</p>
<p>
tax included prie : <input type="text" v-model="taxIncludedPrice">
</p>

Vue.js

 data: {
    basePrice: 100
  },
  computed: {
    taxIncludedPrice: {
      get: function() {
        return parseInt(this.basePrice * 1.10)
            //⏫整数を返す関数
      },
      set: function(taxIncludedPrice) {
      this.basePrice = Math.ceil(taxIncludedPrice / 1.10)
                    //⏫小数点以下を切り上げる関数
      }
    }
  }

dataに基準となる数字をdataPrice入れる。

getでdataPriceに税価格をかけたtaxIncludedPriceを定義。

setの部分では税込価格taxIncludedPriceを受け取って税抜価格にする計算を記述。（ここでは同時に小数点以下を切り上げる関数Math.ceilも記述しています。）それをbase priceに代入しています。

このままではdataPriceに価格を入力しても、taxIncludedPriceで税込価格が表示されないので、テンプレートの側に双方向データバインディング(v-model)を記述します。

まとめ

・dataに基準となる数字を入れる。
・getでdataの値を取り出し税価格（1.10）をかけ、新たな定義を作る。
・setで新たに定義したものの税を抜いたもの（/1.10）をdataの値に代入する。

最後に

今回はgetterとsetterについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！