Vue 3动态设置选择表单元素的选择选项答案

【问题标题】：Vue 3 Dynamically set selected option of select form elementVue 3动态设置选择表单元素的选择选项
【发布时间】：2021-09-19 08:13:16
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vue-component vuejs3 vue-composition-api

【解决方案1】：

您可以为占位符options 分配一个空白值：

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

并在国家/地区更改时在data.country 上使用watcher 将data.state 设置为空白值：

import { defineComponent, watch } from 'vue'

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

demo

【讨论】：