默認 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屬性的行為相同）