Vue: Dynamic Select Options is impractical

[nadenf]

It really is ridiculous to have to convert data to the text/value JSON object format in order to correctly render select options dynamically.

Ideally we would have something along these lines:

<select v-model="selectedItem" v-options="array" v-text="item.firstName" v-value="item.id">
</select>

[yyx990803]

Just want to point out that indicating the current design is "ridiculous" is not a polite way to open a feature request.

[Shiak1]

I was thinking something like this:

<select v-model="selectedItem" options="array" text="firstName" value="id"></select>

where value is optional and if not specified the model will contain the whole object, we talked about it in discussion

[crswll]

That filter approach is awesome. I've been using computed properties but this is way more useful.

[yyx990803]

As suggested in the discussion thread, you can write a reusable custom filter to transform the array:

<select v-model="selectedItem" options="array | extractOptions 'firstName' 'id'"></select>

The reason there are no dedicated attributes for this conversion is because there are many possible cases where the attribute syntax won't suffice: e.g. the source data could be an Object, the select needs optgroups, the text/value need to be formatted, etc. A custom filter gives you the full capability to do any sort of transform you want, while the attribute syntax is just extra syntax for one particular use case.

[boussou]

... ;-)
+1 @yyx990803 (about the "ridiculous" design)

People often forget that they get this for free while you spent numerous hours on it.
Thank you for bringing us a lightweight & smart alternative to angular.

[OEvgeny]

+1 for filter approach. :+1:

[nadenf]

Sorry it was just born out of frustration. There wasn't any malice behind this and I definitely appreciate how fantastic VueJS is.

It would be great if this filter approach could be added into the documentation.

[yyx990803]

No worries, added to todos in docs: https://github.com/vuejs/vuejs.org/issues/86

[merianos]

And what about if we need additional attributes for the options ? like data-*="", selected="", etc ? :smile:

[crswll]

You can use a v-for now. I guess you couldn't do that in the past or it acted funky? Can't remember. But yeah: http://vuejs.org/guide/forms.html#Select-Options

[rpkilby]

This is detailed in the "Component Scoping" section of #1200. Basically, the iterated item in the v-repeat loop would be undefined in the parent scope, making this error:

<option v-repeat="item in list" value="{{ item.value }}">{{ item.text }}</option> 

I think...