---
# System prepended metadata

title: Vue3 購物車-2運費

---

# Vue3 購物車-2運費
## 運費隨付款方式更新
都用v-model 雙向綁定
```html=
<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設定
這個設定很正常就不特別說
```javascript=
data() {
  return {
    payment: '',
  }
}
```
## vue 監聽
因為要判斷是選哪個付款方式，所以在 watch(監聽器) 增加一個方法，跟資料參數命名一樣，會監控資料的變化。
handler 是要放需要處理的程序，會回傳更新前後的數據。當然我們是抓新數據拋至後端，拿到付款方式所設定的運費再更新。
```javascript=
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;
      });
    }
  }
},
```