選擇選項加載時不顯示默認值，選擇其他選項時不顯示

Question

我使用vue.js設計了一種表單，其中元素之一是選擇選項下拉列表。 但是在加載時，默認值不會顯示，然后從下拉列表中選擇新目標時，它也不會顯示。

使用v-for循環訪問數組中的所有選項，它將運行並在單擊時顯示列表。 但是開始時沒有顯示默認值。

嘗試通過以下鏈接修復此問題： Vue.js在@change上獲取選擇的選項 ， 將默認值設置為選項選擇菜單

但沒有成功

//DOM
<select
 v-on:change="selectSubject($event)"
 v-model="selectedSubject"
 class="form-control form-control-lg"
 id="selectSubject"
>
  <option value="" disabled>Choose subject</option>
  <option 
   v-for="(option, index) in subjectOption" 
   v-bind:value="option.value"
   v-bind:key="index"
  >
   {{ option.text }}
  </option>
</select>


//Logic
export default{
   name: "form-block",
   data: () => ({
      selectedSubject: null,
      subjectOption: [
         { text: 'Item 1', value: 'Item 1' },
         { text: 'Item 2', value: 'Item 2' },
         { text: 'Item 3', value: 'Item 3' },
         { text: 'Item 4', value: 'Item 4' },
         { text: 'Item 5', value: 'Item 5' },
      ],
   }),
   methods: {
     selectSubject (event) {
       console.log(event.target.value);
     }
   }
}

我只希望該值顯示為默認值，然后在選擇為新值時進行更新。

謝謝

Answer 1

您指定的默認值為null因此對於默認值，您應該執行以下操作：

 data: () => ({
  selectedSubject: 'Item 1',
   ....

   })

在模板中嘗試以這種方式綁定值

v-bind:value="subjectOption[index].value" 

<select
 v-on:change="selectSubject($event)"
 v-model="selectedSubject"
 class="form-control form-control-lg"
 id="selectSubject"
>
  <option value="" disabled>Choose subject</option>
  <option 
   v-for="(option, index) in subjectOption" 
   v-bind:value="subjectOption[index].value"
   v-bind:key="index"
  >
   {{ option.text }}
  </option>
</select>