CODEWITHSUNDEEP
vue.js
Charles Perry
Charles Perry

Reputation: 3

Setting selected attribute of an option based on property of outer v-for

I have a select inside a v-for. The options in the select is based on different data. I have tried many things, but cannot get the selected value properly set.

<tr v-for="(week,idx) in Picks">
    <td>{{ week.start_formatted }}</td>
    ...
    <template v-if="week.scenario==5">
        <td>
            <select>
                <option v-for="tm in AvailableTeams" v-bind:value="tm.id" selected="{{tm.id === week.team_id}}">
                    {{ tm.name }}
                </option>
            </select>
        </td>
        <td></td>
    </template>
    ...
</tr>

Upvotes: 0

Views: 735

Answers (1)

Ankit Kante
Ankit Kante

Reputation: 2149

You need to add a colon(:) before selected. In VueJS, if u write an expression to set the value of an HTML attribute, u should use v-bind:<propName> or just :propName.

You already did it for v-bind:value, you just missed it for selected.

<option v-for="tm in AvailableTeams" v-bind:value="tm.id" :selected="{{tm.id === week.team_id}}">
  {{ tm.name }}
</option>

Upvotes: 1

Related Questions