<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div class="select-box">
    <select v-model="selectedCity">
      <option disabled value="">請選擇縣市</option>
      <option v-for="item in twZip.city" :key="item.name">
        {{item.name}}
      </option>
    </select>
    <select v-model="selectedArea">
      <option disabled value="">請選擇區域</option>
      <option v-for="item in twZip.area" :key="item.name" :value="item">
        {{item.name}}
      </option>
    </select>
    <a class="btn btn-primary text-white ml-2" @click="handleSelect">送出</a>
  </div>
</div>
.select-box{
  margin: 10px;
}
View Compiled
const { ref, reactive, watch, onMounted } = Vue;
const App = {
  setup() {
    const twZip = reactive({city:[], area:[]})
    const selectedCity = ref('')
    const selectedArea = ref('')
    let selectedData = reactive({city:'', zip: ''})
    
    onMounted(() => {
      axios.get("https://vue-lessons-api.herokuapp.com/city/list").then((res) => {
        twZip.city = res.data.twzip.city;
      });
    });
    
    const handleSelect = () => {
      selectedData.city = selectedCity.value
      selectedData.zip = selectedArea.value
      console.log(selectedData);
    };
    
    watch(selectedCity, (newVal) => {
      const result = twZip.city.filter(
        (list) => list.name === newVal
      );
      selectedArea.value = "";
      twZip.area = result[0].area;
    });
    
    return {twZip, selectedCity, selectedArea, selectedData, handleSelect}
  },
};

Vue.createApp(App).mount("#app");
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js