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

Question

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?

What happens when you change your selected="player.round.best_player == 1" statement as selected="{{player.round.best_player == 1}}" ? — David R
– David R, Commented Jan 16, 2017 at 7:06
Thank you for the comment, but from memory, Vue.js 2.x only allows setting properties programmatically via binding. — AshMenhennett
– AshMenhennett, Commented Jan 16, 2017 at 7:32

Saurabh · Accepted Answer · 2017-01-16 07:07:19Z

2

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

answered Jan 16, 2017 at 7:07

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AshMenhennett Over a year ago

Thank you! This was the fix :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related