Deprecate "options" param for <select v-model>

[yyx990803]

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>

[J-F-Liu]

Great, when I first see options I think it should be v-options.

[jonathanpmartins]

+1

[thelinuxlich]

Can I use it like this:

<select v-model="selected">
  <option v-for="obj in objList" :value="obj">{{obj.description}}</option>
</select>

[ije]

the bind-value syntax can't visit the property of 'obj' of 'objList'?

at the following example, the options' value is equal it's node text, but I wish the options' value is equal the obj.value!

<select v-model="selected">
  <option v-for="obj in objList" bind-value="obj.value">{{obj.description}}</option>
</select>

[yyx990803]

@ije this issue was a bit out of data, the syntax should be v-bind:value instead of bind-value.

[Haixing-Hu]

@yyx990803 I need to write a customized select component which accepts a property options which specifies either the options or the option groups (that is, acts exactly the same as the options property in the v0.x.x version of Vue.js). How can I do that? Thanks in advance.

[yyx990803]

@Haixing-Hu http://vuejs.org/guide/custom-directive.html#params

[flaird]

@yyx990803 FYI, I think http://vuejs.org/examples/select2.html is still using the old param.

[bajras]

Quick question:

I’m creating dynamic selects depending on the data and would like to set it in a way where the first option is always selected and is passed in to the v-model. Since i'm setting formData to empty object on initial load and v-model is bind to that it doesnt get assigned to the v-model. How can I get it to work where I would like to add the selected option to be in the v-model.

<select v-model="formData[word.name]" :name="word.name">
 <option v-for="(option, index) in word.fieldProps.opts" 
 :key="index" :value="option.value" 
 :selected="index === 0 ? 'selected' : ''">{{ option.value }}</option>
</select>

data() {
 return { 
 formData: {}
};