Set text key and value key on select element

[joshlieb]

So let's say I have a list of employees stored in the database, the employee model looks something like this: { Id: 1, Name: 'John', Age: 56, Income: 5000 } now in order to bind the options to a v-model using a select element I'd have to something like this which is okay if I just do it once like in the sample, but way too messy when I start using it all across the app.

What I would suggest is something like this: <select v-model="name" options="names" text="Name" value="Id">, knockout offers something like that as demonstrated here.

Thanks in advance.

[joshlieb]

I know this example right here will do for most, I just think setting it as an option will help a lot

[nirazul]

I think it should be possible to write a custom filter to achieve that. Then you would have a syntax like that:
<select v-model="name" options="names | selectify 'Name' 'Id'"></select>

The filter would take the values and transform the property in the correct form for you:

Vue.filter('selectify', function(options, nameId, valueId) {
    return options.map(function(item) {
        return {
            text: item[nameId],
            value: item[valueId]
        }
    });
});

I haven't tested it and it's possible that this approach doesn't work due to some Observer speciality for data...

Update:
I got it to work with help from @platov and @OEvgeny in the gitter chat: Fiddle

[joshlieb]

I like that approach, I just don't see why it shouldn't be a prop in the first place, besides what if I want to save the whole object as the value?

[nirazul]

It's the easiest approach to use a custom filter. I'm not sure how to implement a props-based approach.
Maybe this would be something for the vue issue tracker as a suggetion. I can see you have a valid point as it is not that easy to return the whole object. Vue seems to always return the value.