v-model value not respected on start

Hey!

Thank you very much for this very easy to use and customizable component! 🎉

It works very well so far, except showing initial selected values. In the example below I load a list of users and their associated roles and a list of all roles as well. The user.role_ids property is an array with only one value [ 1 ], but nothing is displayed in the Multiselect component. When selecting one of the options in the Multiselect dropdown, the user.role_ids changes and the entry is displayed in the components div.

But I can see no difference in the result in user.role_ids. Is there something I am missing or using the component the wrong way?

Example:

<template>
    <div>
        <div v-for="user in state.users" :key="user.id">
            {{ user }}
            // { "id": 1, "name": "Admin", "email": "....", "created_at": "2017-12-20T09:47:36.000000Z",
            // "updated_at": "2021-01-26T14:19:00.000000Z", "role_ids": [ 1 ],
            // "roles": [ { "id": 1, "name": "admin", "display_name": "Administrator", "description": "Project Administrator",
            // "created_at": "2017-12-20T09:47:35.000000Z", "updated_at": "2017-12-20T09:47:35.000000Z" } ] } 

            {{ user.role_ids }}
            // [ 1 ]

             {{ state.roles }}
             // [ { "id": 1, "name": "admin", "display_name": "Administrator", "description": "Project Administrator",
             // "created_at": "2017-12-20T09:47:35.000000Z", "updated_at": "2017-12-20T09:47:35.000000Z" },
             // { "id": 2, "name": "guest", "display_name": "Guest", "description": "Guest User",
             // "created_at": "2017-12-20T09:47:35.000000Z", "updated_at": "2017-12-20T09:47:35.000000Z" } ] 
             <multiselect
                 v-model="user.role_ids"
                 :label="'display_name'"
                 :track-by="'display_name'"
                 :valueProp="'id'"
                 :mode="'tags'"
                 :searchable="true"
                 :options="state.roles"
                 :placeholder="t('main.user.add-role-placeholder')">
             </multiselect>
         </div>
    </div>
</template>

<script>
import {
    computed,
    reactive,
} from 'vue';

export default {
setup() {
    const state = reactive({
        userList: computed(_ => store.getters.users),
        roles: computed(_ => store.getters.roles),
    });
    return {
        state
    }
}
</script>

[adamberecz]

Added a patch in 1.3.1 where nextTick is no longer required.

[alexeyolenikov]

@adamberecz hi, i have the same problem, when getting options asynchronously (render select with empty options and then update otions)

@v1r0x, hi! You can fix your problem by adding 'v-if=state.roles.length" to multiselect component