Блог

Используя Vue 3, как я могу динамически установить selected параметр, если значение данных не соответствует доступному значению параметра?

Состояние:

Если Флорида (Флорида) является значением сохраненных данных для штата, и страна изменяется с Соединенных Штатов (США) на Канаду (Калифорния), значение параметра штата становится пустым. Вместо этого я хотел бы, чтобы элемент-заполнитель отображался как параметр «выбрано», когда нет совпадения.

 <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>
 

Вы можете назначить пустое значение заполнителю option s:

 <option value="" disabled>state</option>
<option value="" disabled>province</option>
 

И используйте наблюдатель data.country , чтобы установить data.state пустое значение при изменении страны:

 import { defineComponent, watch } from 'vue'

export default defineComponent({
  setup() {
    //...
    watch(() => data.country, () => data.state = '')
  },
})
 

ДЕМОНСТРАЦИЯ