在 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