默认 Select 选项是多个 Select 没有被明显选中。 (VueJs3)

Question

我创建了一个 Select 选项，其中一个选项默认选中。 在下面的示例中，默认选择的选项在打开之前在 select 栏中明显选择。

<select v-model="formData.replyMethod">
 <option value="" selected {{ $t(`files.homeName`)}}</option> # This is visibly selected
 <option value="1" selected {{ $t(`files.foo`)}}</option>
 <option value="2" selected {{ $t(`files.bar`)}}</option>
</select>

但是，当移动到 Computed Property & V-For 时，选择的选项被选中，但不可见（您现在必须打开列表才能看到），取而代之的是一个空白栏。

是什么导致这两种创建列表的方式在 output 中的差异？

示例 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'}]

Answer 1

当使用带有 select 输入的 v-model 时，不要使用 selected 属性为您的 select 输入设置默认值。

如果您通过selectedOption.id为每个选项设置值，则只需键入您希望它在formData.replyMethod中可见的选项的 id。

例如：

 const selectOpts = [{ id: 1, name: 'files.placeholder'}]; const formData = { replyMethod: 1, };

 <select v-model="formData.replyMethod"> <option v-for="option in selectOpts":value="option.id"> {{ option.text }} </option> </select>

这将为您在组件安装上的输入设置一个初始值，该值将在用户操作时被覆盖（与selected属性的行为相同）