Is there a way to dynamically set the selected option in Vue 3 when the data value doesn't match any available option value?
Situation:
If Florida (FL) is the stored state value and the country changes from United States (US) to Canada (CA), the State's option value becomes blank. Rather than having it as blank, I want the placeholder item to be shown as the 'selected' option when there is no match.
<template>
<div>
<label v-if="data.country === 'US'">
State
<select v-model="data.state">
<option value="" disabled>state</option>
<option
v-for="(state, i) in states"
:value="state['code']"
:key="i"
>{{ state['name'] }}</option
>
</select>
</label>
<label v-if="data.country === 'CA'">
Province
<select v-model="data.state">
<option value="" disabled>province</option>
<option
v-for="(province, i) in provinces"
:value="province['code']"
:key="i"
>{{ province['name'] }}</option
>
</select>
</label>
</div>
<label>
Country
<select v-model="data.country">
<option value="" disabled>country</option>
<option
v-for="(country, i) in countries"
:value="country['code']"
:key="i"
>{{ country['name'] }}</option
>
</select>
</label>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import data from '...'
import states from '...'
import provinces from '...'
import countries from '...'
export default defineComponent({
setup() {
...
return { data, states, provinces, countries }
},
})
</script>