Vue 筆記 - Computed 的 get() 與 set()

在 Vue 中，computed 的屬性跟 data 的屬性可以視為相同，可以讀取值與設定值，所以可以分成 getter(讀取) 跟 setter(寫入) 兩種。

在預設的狀態下，因為沒有特別設定 setter，所以會被視為唯讀的狀態，不過 Vue 允許開發者自行設定 setter，在 computed 屬性被更新後，原本在 data 內的資料也會被寫回更新。

寫一個雙向匯率計算機

延續上一篇 Vue 筆記 - computed 與 methods 的差別的匯率計算機，這次透過 getter 與 setter 的資料更新，將其內容更新，做到雙向的資料呈現。

HTML

將原本的計算機結構做修改，變成有兩個 input，要做為不同幣值的轉換輸入框。

<div id="app">
  <p>1 日幣 = 0.269 台幣</p>
  <div>日幣 <input type="text" v-model="jpy" /></div>
  <div>台幣 <input type="text" v-model="twd" /></div>
</div>

Vue

1. 在原本的計算中加入 get() 與 set() 兩個函式。
2. get() 讀取值的函式中回傳的方法是跟之前一樣。
3. set() 的方法為把原本的得到的值，透過重新寫入的方式，回傳給台幣。
4. 因為台幣比日幣大，計算時就要變成除日幣匯率，才會正確的讓兩個輸入框的值顯示結果為正確。

const vm = new Vue({
  el: "#app",
  data: {
    jpy: 0,
  },
  computed: {
    twd: {
      get() {
        //輸入的日幣
        return this.jpy * 0.269;
      },
      set(value) {
        //換算後的台幣
        return (this.jpy = value / 0.269);
      },
    },
  },
});