在Vue.js中爲select元素設置'selected'選項

Question

我有一個數組 - selected_players，我正在Vue.js中循環，但無法設置option的selected屬性。

我試圖：:selected="player.round.best_player == 1"

下面是相關模板的部分：

<div v-if="selected_players.length && ! loading"> 
     <h4>Select Best Player</h4> 
     <div class="form-group"> 
      <select name="best-player" id="best-player" v-model="best_player" class="form-control"> 
       <option v-for="player in selected_players" :value="player.id" :selected="player.round.best_player == 1">{{ player.name }}</option> 
      </select> 
     </div> 
     <br /> 

加載時，這是相關的HTML：

<select name="best-player" id="best-player" class="form-control"> 
    <option value="1">Ashley</option> 
</select> 

我如何能實現這個？

Answer 1

要有一個選定的選項，您可以將best_player設置爲您希望默認選擇的選項。

用下面的代碼我遍歷你的player數組，並找到有round.best_player === 1的球員。這個想法是用選定的選項設置best_player。

best_player = player.filter(p => p.round.best_player === 1).id