<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>
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");