Pre Select UiSelect

Sorry for all the inquiries but I just don’t understand how this is supposed to be used.

I have 2 UiSelects one is multi the other is not. I want both to be preselected, but the objects that I pass in as selected are not equal to those in the list (they are for good reasons loaded from 2 different places in the app and therefor have different attributes, but text and value are consistent).

                <ui-select
                        name="roles"
                        v-ref:roles
                        label="Roles"
                        :options="roles"
                        :keys="{text: 'en', value: 'id'}"
                        @closed=""
                        validation-rules="required"
                        multiple>
                </ui-select>

                <ui-select
                        name="title"
                        v-ref:title
                        label="Title"
                        :options="titles"
                        :keys="{text: 'en', value: 'id'}"
                        @closed=""
                        validation-rules="required">
                </ui-select>

Right now I pass it as value, as this is the only way I could make it work a little, but not satisfying (the $refs part is due to be changed):

                    this.$refs.title.value     = this.user.title;
                    this.$refs.roles.value     = this.user.roles;

I would like that the UiSelect checks for key.value (here id) for a match and preselect that and preselects all intersect value (or id) between this.$refs.roles and this.user.roles

[JosephusPaye]

Yeah, the computed is the same as just passing the user.roles array.

The reason yours doesn’t work is because you have a syntax error on line 6:

Should be computed: { instead of computed() {

[JosephusPaye]

See if this example fits your use case: http://codepen.io/JosephusPaye/pen/VKYQOW?editors=1000