javascript - 在 Vue.js 中为选择元素设置 '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