---
tags: Mike課程
---

# 下拉選單
* 在我們做例如縣市及區域名稱時，我們常會碰到下拉式選單做法

1. 先利用axios及onMounted生命週期函式取得api的資料。

//取得 元件渲染完成後的API
        onMounted(() => {
          axios.get('https://vue-lessons-api.herokuapp.com/city/list ').then((res) => {
            twZip.city = res.data.twzip.city;
            // console.log(twZip.city);
          })
        })

2. 定義要塞入資料的空字串

//定義要塞入資料的空字串
        const twZip = reactive({ city: [], area: [] })
        //給予預設select用
        const cityActive = ref('');
        const areaActive = ref('');

3. 利用watch監控取得當前資料

 //watch監控 cityActive 選城市時的變化
        watch(cityActive, (newCity) => {
          const newArr = twZip.city.filter((city) => city.name === newCity)
          //選好城市 取得鄉鎮名子回傳
          twZip.area = newArr[0].area;
          //若選了城市 又替換選了別的城市 會將它預設值 清空
          areaActive.value = '';
          // console.log(newCity);
          console.log(newArr[0].area);
        })

4. 定義HTML架構

 <div id="app">
    <div class="select-box">
      <select v-model="cityActive">
        <option disabled value="">請選擇縣市</option>
        <option v-for="item in twZip.city" :value="item.name" :key="item.name">{{item.name}}</option>
      </select>
      <select v-model="areaActive">
        <option disabled value="">請選擇區域</option>
        <option v-for="item in twZip.area" :value="item.name" :key="item.name">{{item.name}}</option>
      </select>
    </div>
    <a class="btn" @click="getSubmit">送出</a>
  </div>

> 完成架構

 <div id="app">
    <div class="select-box">
      <select v-model="cityActive">
        <option disabled value="">請選擇縣市</option>
        <option v-for="item in twZip.city" :value="item.name" :key="item.name">{{item.name}}</option>
      </select>
      <select v-model="areaActive">
        <option disabled value="">請選擇區域</option>
        <option v-for="item in twZip.area" :value="item.name" :key="item.name">{{item.name}}</option>
      </select>
    </div>
    <a class="btn" @click="getSubmit">送出</a>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    const { onMounted, reactive, ref, watch } = Vue;
    const App = {
      setup() {
        //定義要塞入資料的空字串
        const twZip = reactive({ city: [], area: [] })
        //給予預設select用
        const cityActive = ref('');
        const areaActive = ref('');
        //watch監控 cityActive 選城市時的變化
        watch(cityActive, (newCity) => {
          const newArr = twZip.city.filter((city) => city.name === newCity)
          //選好城市 取得鄉鎮名子回傳
          twZip.area = newArr[0].area;
          //若選了城市 又替換選了別的城市 會將它預設值 清空
          areaActive.value = '';
          // console.log(newCity);
          console.log(newArr[0].area);
        })
        //取得 元件渲染完成後的API
        onMounted(() => {
          axios.get('https://vue-lessons-api.herokuapp.com/city/list ').then((res) => {
            twZip.city = res.data.twzip.city;
            // console.log(twZip.city);
          })
        })
        //送出後  印出的值  
        const getSubmit = (() => {
          console.log(cityActive.value)
          console.log(areaActive.value)
        });

        return { twZip, cityActive, areaActive, getSubmit };
      },
    };

    Vue.createApp(App).mount("#app");
  </script>