# Vue3 購物車-2運費
## 運費隨付款方式更新
都用v-model 雙向綁定

<div>
  <div>付款方式</div>
  <div>
    <label for="radio-1">信用卡</label>
    <input value="credit" v-model="payment" id="radio-1" name="payment" type="radio">
  </div>
  <div>
    <label for="radio-2">貨到付款</label>
    <input value="cost" v-model="payment" id="radio-2" name="payment" type="radio">
  </div>
</div>

## data設定
這個設定很正常就不特別說

data() {
  return {
    payment: '',
  }
}

## vue 監聽
因為要判斷是選哪個付款方式，所以在 watch(監聽器) 增加一個方法，跟資料參數命名一樣，會監控資料的變化。
handler 是要放需要處理的程序，會回傳更新前後的數據。當然我們是抓新數據拋至後端，拿到付款方式所設定的運費再更新。

watch: {
  payment: {
    handler: function(news, old) {
      const f = new FormData();
      f.append('payment', news);
      axios.post('/cart/payment', f)
      .then((all) => {
        let rs = all.data;
        this.feed = rs.cost;
        this.un_cost = rs.un_cost;
      });
    }
  }
},