Jamie Jamie - 1 month ago 17
Javascript Question

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

Answer

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 ''.

Comments