1

I read in Vue.js 0.12 Guide that you can dynamically produce option tags inside a select tag with options attribute like below:

<select v-model="selected" options="myOptions"></select>

But it does not work in Vue.js 2.0 and I have to use v-for directive. Is this feature removed in version 2.0?

Omid Sadeghi
  • 675
  • 7
  • 16

1 Answers1

2

It's been deprecated since the 1.0 version, as mentioned in an old issue (#1229) on the official repo.

Problem

The options param has been a common gotcha when dealing with v-model on <select> elements. It often requires additional formatting of the source data with a custom filter, and has limited capabilities in customizing the rendered options.

Proposal

The reason options existed was due to some internal implementation issues - there is really no reason for it to be that way from the UX perspective. Therefore in 1.0, with some internal refactoring, we will deprecate the options param - instead, just use a normal v-for:

<select v-model="selected">
  <option v-for="option in list">{{option}}</option>
</select>

If you have an Array of objects, you can also bind the underlying v-model value directly to the object by using v-bind:value on the options:

<select v-model="selected">
  <option v-for="obj in objList" v-bind:value="obj">{{obj.description}}</option>
</select>
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129