CODEWITHSUNDEEP
javascriptvue.jshtml-select
Omid Sadeghi
Omid Sadeghi

Reputation: 694

options attribute of select element does not work in vue.js 2.0

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?

Upvotes: 1

Views: 43

Answers (1)

Emile Bergeron
Emile Bergeron

Reputation: 17430

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>

Upvotes: 2

Related Questions