Einstellung der ausgewählten Option für das Element in Vue.js

Question

Ich habe ein Array - selected_players, das ich in Vue.js durchlaufen habe, aber ich bin nicht in der Lage, das selected Attribut eines option zu setzen.

Was ich versuche: :selected="player.round.best_player == 1"

Hier ist der Abschnitt der zugehörigen Vorlage:

<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 /> 

Wenn geladen, ist dies die zugehörige HTML:

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

Wie kann ich erreichen, Dies?

Answer 1

Um eine ausgewählte Option zu haben, können Sie einfach best_player als diejenige festlegen, die standardmäßig ausgewählt werden soll.

Mit dem untenstehenden Code Iteriere ich über Ihr player Array und finde den Player, der round.best_player === 1 hat. Die Idee ist, die best_player mit der ausgewählten Option einzustellen.

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