CODEWITHSUNDEEP
javascriptvue.js
Jamie
Jamie

Reputation: 10886

Vue.js 1.0 select

In my webapp I've a select like this:

<select class="Form-group-item" v-model="user.corporation_id">
    <option value="" disabled selected>Corporatie</option>
    <option v-for="corporation in corporations" v-bind:value="corporation.id">{{ corporation.name }}</option>
</select>

So I receive user.corporation_id in a json format:

corporation_id:2

And I set it on the user object. But when I look into my vue-devtools user.corporation_id is '' ??

When I remove the entire select from my html

user.corporation_id = 2 !

What's wrong here??

Upvotes: 1

Views: 110

Answers (1)

Robert P
Robert P

Reputation: 96

Remove 'selected' from the default option

<select class="Form-group-item" v-model="user.corporation_id">
    <option value="" disabled>Corporatie</option>
    <option v-for="corporation in corporations" v-bind:value="corporation.id">{{ corporation.name }}</option>
</select>

Since you have it as 'selected' it's overriding the value you have set and changing it to ''.

Upvotes: 1

Related Questions