在 Vue.js 中为选择元素设置“选择”选项答案

【问题标题】：Setting 'selected' option for select element in Vue.js在 Vue.js 中为选择元素设置“选择”选项
【发布时间】：2017-05-30 23:23:55
【问题描述】：

我有一个数组-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>

我怎样才能做到这一点？

【问题讨论】：

当您将selected="player.round.best_player == 1" 语句更改为selected="{{player.round.best_player == 1}}" 时会发生什么？
感谢您的评论，但根据记忆，Vue.js 2.x 仅允许通过绑定以编程方式设置属性。

标签： javascript arrays vue.js

【解决方案1】：

要选择一个选项，您只需将best_player 设置为您希望默认选择的选项。

使用下面的代码，我正在遍历您的player 数组并找到具有round.best_player === 1 的播放器。这个想法是使用选定的选项设置best_player。

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

【讨论】：

谢谢！这是修复:)