v-model value not respected on start about multiselect HOT 6 CLOSED

@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

from multiselect.

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

from multiselect.

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.

from multiselect.

@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/

from multiselect.

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?

from multiselect.

With $nextTick it works!! See jsFiddle

from multiselect.