v-model value not respected on start

[v1r0x]

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]

You're welcome @v1r0x, I'm glad you like it! I've tried this based on what's available (without store) and the initial value was loaded correctly:

<template>
  <div>
    <multiselect
        v-model="value"
        :label="'display_name'"
        :track-by="'display_name'"
        :valueProp="'id'"
        :mode="'tags'"
        :searchable="true"
        :options="options"
        :placeholder="'Placeholder'">
    </multiselect>
  </div>
</template>

<script>
  import multiselect from '@vueform/multiselect'

  export default {
    components: {
      multiselect,
    },
    data() {
      return {
        value: [1],
        options: [
          { "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" }
        ]
      }
    }
  }
</script>

<style src="@vueform/multiselect/themes/default.css"></style>

So I assume the issue is in the environment, which I cannot see in your example. You should create a complete example that produces the error in JSFiddle so that I can look into further.

[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

[v1r0x]

@alexeyolenikov Hey there! I actually thought I already tried that. But I think I did not 🙈 I'll try it next week. Thanks for the hint!

Edit: It actually works with v-if="state.roles.length"! 🎉
If there's a way to show async options without v-if this would be awesome! \m/

[c4y]

I tried to set options and v-model on mount (jsFiddle). It does not work. The options are set, but the value is not set. Is it a bug? Or how can i set options and value(s) at once after a api request?

[c4y]

With $nextTick it works!! See jsFiddle

[adamberecz]

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