UiSelect - Select option by value

[giovannefeitosa]

Would be nice to select an option by it's string value instead of an object.

<template>
    <ui-select
        ref="selectUser"
        label="Select an user"
        v-model="selectedUser"
        :options="users">
    </ui-select>
</template>

<script>
export default {
    data() {
        return {
            users: [{label: "First User", value: 1}, {label: "Second User", value: 2}],
            selectedUser: '',
        }
    },
    created() {
        // simulate ajax call
        setTimeout(() => {
            this.$refs['selectUser'].selectOptionByValue(2);
        }, 5000);
    }
}
</script>

I wish to contribute with this. Can I?

[JosephusPaye]

HI @shakegioh,

I'm working on some updates to UiSelect for the next release, one of which will be what you are suggesting, and also #270.

Currently you can select an option (using the object) by simply assigning the option to the prop you pass to v-model.

[JosephusPaye]

Even though this would be convenient, for consistency, I think it's best to leave the current behavior as-is.

If not, the value (v-model) will be a string on initial render, and when changed, will go back to being an object.

You select the option by value using this:

data() {
    const users = [{label: "First User", value: 1}, {label: "Second User", value: 2}];

    return {
        users: users,
        selectedUser: users.filter(user => user.value == 2)[0],
    };
},