Allow one static empty option in a select element with dynamic options

[JosephSilber]

When the model is null or an empty string, the static option will be selected. For example:

<select v-model="user" options="users | optionify 'name' 'id'">
    <option>Select a user...</option>
</select>

Without this, you have to fiddle around with the users array to add a "Select a user..." option.

Angular has been supporting this for a long time...

---

BTW, I really think that optionify filter should ship in core...

[JosephSilber]

BTW again, as an example, here's that optionify filter I use:

Vue.filter('optionify', function(items, text, value) {
    return items.map(function(item) {
        if (value == null) return item[text];

        return {
            text: item[text],
            value: item[value],
        };
    });
});

[yyx990803]

The optionify is a separate issue - looks good though, you can open a PR for it.

[pdcmoreira]

So, how do I use this? I've tried adding a None to the select, but it's ignored/overriden and doesn't show.

[yyx990803]

@pdcmoreira this is not released yet.

[Shayac]

@yyx990803 Any updates on this? Has it been released yet?

[pdcmoreira]

@Shayac If you use the new version of VueJS you can just dynamically create <option>'s with v-for="item in items". It's a lot better now.