Vue 3 動態設置選擇表單元素的選定選項

Question

使用 Vue 3，當數據值與可用選項值不匹配時，如何動態設置selected選項？

狀況：

如果佛羅里達 (FL) 是州的存儲數據值，並且國家從美國 (US) 更改為加拿大 (CA)，則該州的選項值變為空白。 相反，當沒有匹配項時，我希望占位符項目顯示為“已選擇”選項。

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

Answer 1

您可以為占位符option分配一個空白值：

<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 = '')
  },
})

演示