CODEWITHSUNDEEP
javascriptarraysvue.js
AshMenhennett
AshMenhennett

Reputation: 1095

Setting 'selected' option for select element in Vue.js

I have an array- selected_players, which I am looping through in Vue.js, but am not able to set the selected attribute of an option.

What I am trying: :selected="player.round.best_player == 1"

Here is the section of the related template:

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

When loaded, this is the related HTML:

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

How can I achieve this?

Upvotes: 2

Views: 4155

Answers (1)

Saurabh
Saurabh

Reputation: 73649

To have a selected option, you can just set the best_player as the one you want to have by default selected.

With below code I am iterating over your player array and finding the player which has round.best_player === 1. The idea is to set the best_player with the selected option.

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

Upvotes: 2

Related Questions