# Vue3 購物車-3地址
## 多層下拉式地址
select、option 寫的參數比較不一樣
select 除了要綁定使用者選了哪個值，還要根據選的值影響其他內容，所以還有綁事件@change。
option 則是單純的把縣市清單跑迴圈。

<div>
  <div>
    <input placeholder="郵遞區號" readonly type="text" :value="order.pay.zip">
  </div>
  <div>
    <select @change="pcity($event.target.value)" v-model="order.pay.city">
      <option value="">選擇縣市</option>
      <option v-for="city in order.pay.citys" :value="city">{{city}}</option>
    </select>
  </div>
  <div>
    <select @change="pcounty($event.target.value)" v-model="order.pay.county">
      <option v-for="country in order.pay.countys" :value="country">{{country}}</option>
    </select>
  </div>
</div>

## vue 方法
data的設定，縣市的部份有另一份縣市陣列的js
把pay, receive 各自設定是有原因的。後面要做資料copy時，就不用一個個設定，會是整個覆蓋，包括了清單與選的值

data() {
  return {
    order: {
      pay: {
        citys: area.counties,
        city: '',
        countys: [],
        county: '',
        zip: '',
      },
      receive: {
        citys: area.counties,
        city: '',
        countys: [],
        county: '',
        zip: '',
      }
    },
  }
}

methods 的方法會比較多
當我選了哪個縣市，找到index，會載入該縣市的區域清單

methods: {
  pcity(city) {
    this.order.pay.zip = '';
    if (city == '') {
      this.order.pay.countys = [];
      return;
    }
    this.order.pay.citys.forEach((v, k) => {
      if (v == city) {
        let districts = area.districts[k];
        this.order.pay.countys = districts[0];
      }
    });
  },
  pcounty(country) {
    this.order.pay.zip = '';
    if (country == '') return;
    this.order.pay.citys.forEach((v, k) => {
      if (v == this.order.pay.city) {
        this.order.pay.countys.forEach((cv, ck) => {
          if (country == cv) this.order.pay.zip = area.districts[k][1][ck];
        })
      }
    });
  },
  rcity(city) {
    this.order.receive.zip = '';
    if (city == '') {
      this.order.receive.countys = [];
      return;
    }
    this.order.receive.citys.forEach((v, k) => {
      if (v == city) {
        let districts = area.districts[k];
        this.order.receive.countys = districts[0];
      }
    });
  },
  rcounty(country) {
    this.order.receive.zip = '';
    if (country == '') return;
    this.order.receive.citys.forEach((v, k) => {
      if (v == this.order.receive.city) {
        this.order.receive.countys.forEach((cv, ck) => {
          if (country == cv) this.order.receive.zip = area.districts[k][1][ck];
        })
      }
    });
  },
},

## 資料copy(不是同步)
一般確認資料時，在收件人都會有一個「與訂購人資料相同請勾」的選項！

<input type="checkbox" value="1" @click="same_addr($event.target.checked)">同訂購人資訊請打勾。

會把寄件人key的所有資料，copy一份覆蓋收件人。
一般我們都會用 a = b 的方式，把b的資料丟給a就結束了
像這樣非常簡單

$('#a').val($('#b').val());

但如果在vue裡面寫這樣，可是會把pay與receive做資料同步哦
相當於v-model的感覺

this.order.receive = this.order.pay;

之後不管寄件人怎麼打，收件人都會一模一樣，並且無法取消綁定!!!
這時methods same_addr(copy)，前面設定是以勾選才copy，所以要這樣設定，就會覆蓋過去，且兩邊資料互不影響

same_addr(copy) {
  if (!copy) return;
  this.order.receive = Object.assign({}, this.order.pay);
}