Vue3中联动下拉菜单如何自动选中第二个下拉框的首选项

v-model在Vue表单绑定中拥有最高优先级，原生<option>标签上的selected属性会被v-model绑定的响应式值覆盖。你的代码中form.selected初始值为空字符串，切换第一个下拉菜单时也没有同步更新这个绑定值，因此第二个下拉菜单会始终显示空值，手动添加的:selected="index===0"不会生效。

监听第一个下拉框绑定值form.type的变化，每次切换类型时，直接将form.selected赋值为当前对应选项列表的第一个值即可，不需要给option标签手动加selected属性。

优化后代码 #

模板部分 #

可以通过计算属性动态渲染第二个下拉的选项，去掉冗余的v-if/v-else判断：

<template>
  <div class="col-md-6">
    <label for="type" class="form-label">Type</label>
    <select id="type" class="form-select" v-model="form.type">
        <option value="en-US">English (US)</option>
        <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="selected" class="form-label">Option 2</label>
    <select id="selected" name="selected" class="form-select" v-model="form.selected">
        <option v-for="item in currentOptions" :key="item" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

逻辑部分 #

通过watch监听类型变化，同时开启immediate配置保证页面首次加载时就设置好默认选中值：

export default {
  name: "App",
  data() {
    return {
      form: {
        type: 'en-GB',
        selected: ''
      },
      // 调整key和第一个下拉的value对应，减少冗余判断
      types: {
        'en-US': ['Lakers', 'Bulls', 'Mavericks'],
        'en-GB': ['Arsenal', 'Chelsea', 'Liverpool']
      }
    }
  },
  computed: {
    // 实时返回当前选中类型对应的选项列表
    currentOptions() {
      return this.types[this.form.type]
    }
  },
  watch: {
    'form.type': {
      immediate: true, // 初始化时立即执行，覆盖初始空值
      handler(newType) {
        // 切换类型时直接选中当前选项列表的第一个值
        this.form.selected = this.types[newType][0]
      }
    }
  }
};

• 和v-model配合使用的表单元素，不要手动添加selected/checked这类原生选中属性，Vue会完全以v-model绑定的响应式值作为选中状态的唯一判断依据
• 用计算属性管理联动选项，后续新增类型只需要在types配置中添加对应项即可，不需要修改模板结构
• 如果需要保留用户切换前的选择，可以在handler中加判断，仅当当前选中值不在新选项列表中时，才重置为第一个值

内容的提问来源于stack exchange，提问作者Halnex