Vue-multiselect: Template or render function not defined.

[MichMich]

After e few hours of pulling my hair and furious googling, I can't come up with an other solution then to open this issue.

I tried to include multiselect (2.0 branch) into my vue 2.0 project. Unfortunately, the components doesn't want to work, giving me the following error:

[Vue warn]: Failed to mount component: template or render function not defined.
(found in component )

I know that this has something to do with the standalone built vs realtime only buit. But even when I include Vue using import Vue from 'vue/dist/vue.js' (or the suggested alias way), it still gives me this issue. I also checked your package, and it seems you don't even use render options afaik.

I'm using the component in a Vue/Laravel/Elixir setup which uses webpack.

I add your component using the following line (just like all my other components):
Vue.component('Multiselect', require('vue-multiselect'));

Unfortunately, all of your examples give me the same issue.

Any idea where to look for a solution?

[shentao]

Crap. Really sorry to hear that. 😔

Not sure why the default import doesn’t work out of the box when using require(). I will look into it later. Thanks for bringing this up.

Anyway, there are several workarounds for this:

Either use es6 modules:

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

Or do it this way.

Vue.component('Multiselect', require('vue-multiselect').default)

[MichMich]

This solved the issue:
Vue.component('Multiselect', require('vue-multiselect').default)

Thanks a lot! :)

[shentao]

No problem. Let me know if you encounter any other problems. :)

[MichMich]

Just one simple question: is there a way to limit the input to [a-zA-Z0-9] only? So no alpha numeric characters? (Useful for tagging ...)

[shentao]

I’m afraid it’s not possible.

However, a way to partially do it would require you to transform the diacritics and remove other non alpha-numeric characters inside the @tag handler, before you save it as a tag.

[MichMich]

Maybe there is a way to manipulate the current typed value on the SearchChange event?

[shentao]

Sadly, it’s an internal value. You are not able to modify it.

[MichMich]

Would you be interested in a PR that contains a property which accepts a regex? inputFormat (or something like that...) ?

[shentao]

Sure :)

[MichMich]

Hm... I see you require tests as well... I have absolutely no experience writing them in javascript ... Well let's first worry about the implementation ;)

[shentao]

I can do the tests myself.

[tonypee]

Im getting this issue too, and the fix above doesnt work:

warn @ vue.js?3de6:515
Vue._render @ vue.js?3de6:2893
(anonymous) @ vue.js?3de6:2317
get @ vue.js?3de6:1630
Watcher @ vue.js?3de6:1622
Vue._mount @ vue.js?3de6:2316
Vue$3.$mount @ vue.js?3de6:5833
Vue$3.$mount @ vue.js?3de6:8095
init @ vue.js?3de6:2610
createElm @ vue.js?3de6:3971
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
patch @ vue.js?3de6:4351
Vue._update @ vue.js?3de6:2342
(anonymous) @ vue.js?3de6:2317
get @ vue.js?3de6:1630
Watcher @ vue.js?3de6:1622
Vue._mount @ vue.js?3de6:2316
Vue$3.$mount @ vue.js?3de6:5833
Vue$3.$mount @ vue.js?3de6:8095
init @ vue.js?3de6:2610
createElm @ vue.js?3de6:3971
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
patch @ vue.js?3de6:4351
Vue._update @ vue.js?3de6:2342
(anonymous) @ vue.js?3de6:2317
get @ vue.js?3de6:1630
Watcher @ vue.js?3de6:1622
Vue._mount @ vue.js?3de6:2316
Vue$3.$mount @ vue.js?3de6:5833
Vue$3.$mount @ vue.js?3de6:8095
init @ vue.js?3de6:2610
(anonymous) @ vue.js?3de6:2766
createElm @ vue.js?3de6:3971
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
createChildren @ vue.js?3de6:4017
createElm @ vue.js?3de6:4002
patch @ vue.js?3de6:4351
Vue._update @ vue.js?3de6:2342
(anonymous) @ vue.js?3de6:2317
get @ vue.js?3de6:1630
Watcher @ vue.js?3de6:1622
Vue._mount @ vue.js?3de6:2316
Vue$3.$mount @ vue.js?3de6:5833
Vue$3.$mount @ vue.js?3de6:8095
init @ vue.js?3de6:2610
createElm @ vue.js?3de6:3971
patch @ vue.js?3de6:4386
Vue._update @ vue.js?3de6:2342
(anonymous) @ vue.js?3de6:2317
get @ vue.js?3de6:1630
Watcher @ vue.js?3de6:1622
Vue._mount @ vue.js?3de6:2316
Vue$3.$mount @ vue.js?3de6:5833
Vue$3.$mount @ vue.js?3de6:8095
(anonymous) @ main.js?3479:48
(anonymous) @ app.js:1428
__webpack_require__ @ app.js:554
fn @ app.js:85
(anonymous) @ app.js:586
__webpack_require__ @ app.js:554
(anonymous) @ app.js:577
(anonymous) @ app.js:580
vue.js?3de6:2902 TypeError: e._v is not a function
at Proxy.render (eval at (app.js:3029), :1:16551)
at VueComponent.Vue._render (eval at (app.js:599), :2890:22)
at VueComponent.eval (eval at (app.js:599), :2317:21)
at Watcher.get (eval at (app.js:599), :1630:27)
at new Watcher (eval at (app.js:599), :1622:12)
at VueComponent.Vue._mount (eval at (app.js:599), :2316:19)
at VueComponent.Vue$3.$mount (eval at (app.js:599), :5833:15)
at VueComponent.Vue$3.$mount (eval at (app.js:599), :8095:16)
at init (eval at (app.js:599), :2610:11)
at createElm (eval at (app.js:599), :3971:56)

my code:

import Multiselect from 'vue-multiselect'
import Vue from 'vue'

  Vue.component(Multiselect)

  @Component({
    components: { Multiselect },
  })
export default class { ... }

many other components work for me (other libs and local components). not sure whats going on here

[dlukowski-smarsh]

I see this hasn't been address in exactly a year to the day, but I am still getting this error with vue 2.5.2

my code:

<template>
<div>
    <multiselect v-model="internalValue",
                    :options="options",
                    @search-change="searchFunction",
                    placeholder="Type to search",
                    :custom-label="customLabel",
                    track-by="code"/>
</div>
</template>
<script>
import { namespace, SEARCH_GROUPS } from "@/store/modules/manage-groups"
import Multiselect from "vue-multiselect"
export default {
    name: "SelectGroupMultiple",
    model: {
        prop: "value",
        event: "input"
    },
    components: { Multiselect }
...

[Vue warn]: Failed to mount component: template or render function not defined.

found in

--->
at components\select-group-multiple.vue

I've also tried the suggestions above.

Either use es6 modules:

import VueMultiselect from 'vue-multiselect'
Vue.component('Multiselect, VueMultiselect)
Or do it this way.

Vue.component('Multiselect', require('vue-multiselect').default)

With a similar result

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[OliverGrimsley]

I do not think you can close the tag that way, try:

<multiselect 
        v-model="internalValue",
    :options="options",
    @search-change="searchFunction",
    placeholder="Type to search",
    :custom-label="customLabel",
    track-by="code"
>
<span slot="noResult">No records</span>
</multiselect>

At least, this is how I do it, and it works for me.