Multiselect is always fragment instance

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

[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]

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.