Vue-multiselect: Multiselect is always fragment instance

[IvanBernatovic]

@shentao

Hello, I have the same problem and I've tried everything suggested in issue #34 and #36, 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.

[shentao]

This is really weird. I can’t really reproduce the problem. Does it only happen in this parent component or everytime you try to use vue-multiselect?

[IvanBernatovic]

This is a bit complicated example for jsbin and similar services so we can deploy current version somewhere and give you access to source code. It would be really nice because we are stuck and then we would owe you a :beer: :smile:.

[Chalkin]

yeah, @IvanBernatovic and I are really stuck here.

[shentao]

Are you using the newest version of multiselect? What about webpack’s vue-loader or vueify versions? Does it happen only inside of <TagPopover> or everywhere in the app, where you use multiselect?
@IvanBernatovic I wish I could help, so if I may look into the source code of those components, maybe I could find where the problem is.

[IvanBernatovic]

We are using Laravel Elixir 6.0.0-10 which is wrapper for Browserify 13.1.0 and Vuefiy 8.7.0 setup. Multiselect version is 1.1.2 which is latest stable version for Vue 1.0.x if I'm not mistaken. Haven't tried Webpack + vue-loader yet.

I tried it only in parent component <TimelogItem> and got the same error. I tested it somewhere else and it worked, but used it differently (was experimenting with Handlebars and Vue which is really bad solution for us).

[travisamiller]

@IvanBernatovic I am also using Laravel Spark + Elixir + Vueify and found the following to work (using <multi-select> as the tag):

<script>
    import { Multiselect } from 'vue-multiselect'
    export default {
        props: [],
        components: {
            'multi-select': Multiselect
        },
        methods: {
        }
    }
</script>

This seems to work as well:

<script>
    export default {
        props: [],
        components: {
            'multi-select': require('vue-multiselect').Multiselect
        },
        methods: {
        }
    }
</script>

[shentao]

This is really weird, but maybe somehow it helps with parsing the component. If I’m right, custom elements should have a hyphen somewhere in between, like multi-select.

[IvanBernatovic]

Solutions from @travisamiller work so thank you. It is strange indeed. And thank you @shentao for having a look.

[shentao]

Glad it finally works. Sorry, I couldn’t help you.
@yyx990803 maybe you could provide some insight here?
I know there is just a notice which says:

Note that Vue.js does not enforce the W3C rules for custom tag-names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.

[shentao]

I will add a short notice in the docs that importing it as MultiSelect might solve some problems with fragment instance.

Closing it for now.