Vue selected prop not working with v-model

Question

The :selected prop is not selecting the target option in Vue2 when i use v-model for select :

Template

...
<select v-model="form.item">
    <option :value="item.id" v-for="(item, index) in items" :selected="item.status == 2">{{ item.name }}</option>
</select>
...

Script

data: function () {
    return {
        items: [{id:1, name: "foo", status: 1},{id: 3, name: "bar", status: 2}],
        form: {item: null}
    }
}

In this case , after mounted there is no selected option.

How can i fix this?

Note

When i remove v-model it works fine (target option is selected by default) but i don't have the value of the selected option in form.item

Answer 1

v-model will ignore the initial value, checked or selected attributes. found on any form elements

The solution is to remove :selected binding. and use data props to bind to v-model

<select v-model="form.selectedItem">
   <option :value="item.id" v-for="(item, index) in items">{{ item.name }}
   </option>
</select>

declare vue instance as

data() {
 return {
  selectedItem: 2
 }
}

link to official documentation

Answer 2

Another solution is by using $refs instead of v-model.

<select ref="selectedItem">
   <option v-for="(item, index) in items" :value="item.id" :selected="item.status == 2">
      {{ item.name }}
   </option>
</select>

Then to get the value of the selected item, call...

this.$refs.selectedItem.value