Vue3中默认选中选项在计算属性+V-For下仅后台选中不显示的问题

我创建了一个带默认选中项的下拉选择框，示例1中默认选中的选项在下拉框展开前就能在选择栏正常显示：

<select v-model="formData.replyMethod">
 <option value="" selected>{{ $t(`files.homeName`)}}</option> <!-- 此选项默认显示为选中状态 -->
 <option value="1">{{ $t(`files.foo`)}}</option>
 <option value="2">{{ $t(`files.bar`)}}</option>
</select>

但使用计算属性和v-for生成选项时，选中项虽处于选中状态，但选择栏显示空白，必须展开下拉列表才能看到已选中项，示例2代码如下：

<select v-model="formData.replyMethod">
        <option v-bind:value="selectedOption.id" selected>{{ $t(selectedOption.name) }}</option>
        <option v-bind:value="selectOpts.id" v-for="selectOpt in selectOpts">{{ $t(selectOpt.name) }}</option>
</select>

const selectedOption = computed(() => {
  if(fooBarVariable) {
    let opt =  {id: 1, name: 'Foo'};
    return opt
  }
});

const selectOpts = [{ id: null, name: 'files.placeholder'},{id: 1, name: 'files.reply'},{id: 2, name: 'files.example'}]

请问这两种创建方式导致显示差异的原因是什么？

核心原因分析 #

1. Vue的v-model完全接管选中状态 #

Vue对表单元素的**v-model是双向绑定逻辑**，它会忽略原生的selected属性，完全根据绑定值来匹配选中的选项。示例1里的正常显示，本质是formData.replyMethod的初始值和第一个option的value=""匹配，Vue自动将其设为选中并显示——哪怕你删掉示例1里所有的selected属性，只要formData.replyMethod初始值为空，第一个选项依然会正常显示。

2. 计算属性与绑定值的匹配问题 #

示例2的显示异常主要来自两个点：

• 计算属性可能返回undefined：当fooBarVariable为false时，selectedOption没有返回值，此时对应的option的value是undefined，模板里的{{ $t(selectedOption.name) }}也会报错，导致这个option渲染失败，选择栏自然空白。
• v-model绑定值与选项value不匹配：假设fooBarVariable为true，selectedOption.id是1，但如果formData.replyMethod的初始值不是1，Vue找不到对应的选项，就会显示空白。另外你写的v-for里value绑定错误，应该是selectOpt.id而非selectOpts.id，这会让循环生成的选项value全为undefined，进一步加剧匹配混乱。

3. 冗余选项导致匹配逻辑混乱 #

示例2里单独写了一个绑定selectedOption的option，同时v-for又生成了id为1的选项，下拉列表里会出现两个value=1的选项，Vue的选中匹配逻辑会被干扰，这也是显示异常的诱因之一。

修正方案示例 #

补全计算属性的默认返回值，删除冗余的独立option，确保v-model初始值与选项value一致：

<select v-model="formData.replyMethod">
  <option 
    v-for="selectOpt in selectOpts" 
    :value="selectOpt.id"
  >
    {{ $t(selectOpt.name) }}
  </option>
</select>

const selectedOption = computed(() => {
  // 确保始终返回有效选项
  if(fooBarVariable) {
    return selectOpts.find(opt => opt.id === 1);
  }
  // 默认返回占位符选项
  return selectOpts[0];
});

// 初始化v-model绑定的变量，与选中选项的value匹配
formData.replyMethod = selectedOption.value.id;

const selectOpts = [
  { id: null, name: 'files.placeholder'},
  {id: 1, name: 'files.reply'},
  {id: 2, name: 'files.example'}
];

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