Vue-multiselect: Attributes are ignored because the component is a fragment instance

[xeyefex]

Hi there, in my vuex / vue-router spa on a fresh install with just the basic example i'm getting:

vue.common.js?e881:1014 [Vue warn]: Attributes ":selected.sync", ":options" are ignored on component <multiselect> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

Would really like to use it in my project any insight on this?

[shentao]

How do you import the component?

It should be like this:
import { Multiselect } from 'vue-multiselect'
See the documentation for further examples.

If you omit the { } it will throw the above error. Let me know if this helps. I hope it does! 😃

[xeyefex]

Yes correct ! a small misstep by me ! Works as expected with the curly braces.
Thanks for the quick replay and for the awesome project !

[shentao]

I’m glad I could help! 👍

[jpmurray]

Using this component with Laravel Spark at the moment, I'm getting also those error, with the brackets added.

import {Multiselect} from 'vue-multiselect'

Vue.component('multiselect', {
    components: { Multiselect },

    data: function() {
        return {
            selected: null,
            options: ['list', 'of', 'options']  
        };
    }
});

Using it with this: <multiselect :options="options" :selected.sync="selected"></multiselect>

Now I really dont understand fragments instance, I just can't wrap my head around the concept, but might I get this error because I call it from within an another component (think <component-one><multiselect></multiselect></component-one>)?

[shentao]

I’m not sure that the above construction is actually valid. Because you try to register another component named 'multiselect' with Multiselect as a child component, but without providing any template, that would actually start the vue-multiselect inside.

If you need to register the multiselect component globally please do it as in the Vue docs.

import { Multiselect } from 'vue-multiselect'
Vue.component('multiselect', Multiselect)

If you intend on wrapping vue-multiselect inside another component, please try the following code:

import { Multiselect } from 'vue-multiselect'

var CustomSelect = Vue.extend({
    components: { Multiselect },
    template: '<div><multiselect :selected="selected" :options="options"></multiselect></div>',
    data: function() {
        return {
            selected: null,
            options: ['list', 'of', 'options']  
        };
    }
})

Vue.component('customselect', CustomSelect);

You could try omiting the additionall <div> inside the template string. Then you could run the component with <customselect></customselect>.

Let me know if this helps! :)

[jpmurray]

I'll be damned, it works by adding the template to the component ;-)

Thank for that!

(And wow, do I don't get fragment instance! haha)

[shentao]

Haha :D I’m glad to hear that!
Just wondering, does it work if you remove the <div></div> from the template?

[jpmurray]

It does!

[jpmurray]

Oh, wait, @shentao, I take back what I said. Without the div, it works, it doesn't throw fragment instances errors, but Vue-devtools still flag the component as fragment. Putting back the div will make things perfect.

[theseawolves]

May be the fault is globally use like this:

<multiselect></multiselect>
components: {
     'multiselect': VueMultiselect
}

but the correct use is like this:

<multiselect></multiselect>
components: {
     'multiselect': VueMultiselect.Multiselect
}

[shentao]

@theseawolves This is true if you import it globally, otherwise

import { Multiselect } from 'vue-multiselect'

is the correct way.

[IvanBernatovic]

@shentao

Hello, I have the same problem and I've tried everything suggested here, still no solution. I tried registering multiselect as global component, used it as a child component to my custom component, tried to use it in .vue component file, tried to use it in custom component markup (using inline-template directive). Tried it with both of these combinations for importing:
import { Multiselect } from 'vue-multiselect' and import Multiselect from 'vue-multiselect'

This is my custom <tag-popover component (exported in tag-popover.vue file).
This is the template part:

<template>
  <div>
    <p v-if="timelog.tags.length < 1" class="tags"><a @click.prevent="openPopup" href="#">Add tags...</a></p>
      <div v-else class="tags" id="timelog-tags-@{{ timelog.id }}" v-on:click="openPopup">
        <template v-for="tag in timelog.tags | limitBy 2">
          <span class="label label-primary">@{{ tag.name }}</span>
        </template>
      </div>

    <div v-show="showPopup" id="inner-tags-popup-@{{ timelog.id }}" class="entry">
      <h1>Popover works</h1>
      <div>
        <multiselect @tag="addTag" @select="selectTag" @remove="removeTag"
                     :close-on-select="false" :taggable="true"
                     :multiple="true" label="name" key="id"
                     :selected="timelog.tags" :options="tags">
        </multiselect>
      </div>
    </div>
  </div>
</template>

This is the script part:

import PopoverMixin from './popover-mixin'
import { Multiselect } from 'vue-multiselect'

export default {
  props: ['tags', 'timelog', 'showPopup'],
  mixins: [PopoverMixin],
  components: {
    Multiselect
  },
  methods: {
    // ...some methods
  }
}

This is the console error I'm getting [Vue warn]: Attributes ":close-on-select", ":taggable", ":multiple", "label", "key", ":selected", ":options" are ignored on component <multiselect> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance.

Here is apps hierarchy in Vue Devtools:

One more thing, project is based on Laravel Spark.

I'm really stuck with this and I would like to use vue-multiselect cause it's awesome.