Vue-multiselect: Multiselect throws errors

[wahiche-architech]

So I have been trying to get tagging and multiselect to work but no matter what I do, what advice I follow on forums there is no resolution.

I am using Vue 2.0,
have "vue-multiselect": "^2.0.0-beta.13" in my package.json
let Multiselect = require('vue-multiselect');
local registration of the component components: Multiselect,
and my template has this markup
track-by="name"
label="name"
placeholder="Select one"
:options="options"
:searchable="false"
:close-on-select="false"
:clear-on-select="false"
:show-labels="false"
:allow-empty="false"
:multiple="true">

My console spits out this error
warn @ vue.common.js:521
e._render @ vue.common.js:2223
(anonymous) @ vue.common.js:2609
Watcher.get @ vue.common.js:2934
Watcher @ vue.common.js:2926
e._mount @ vue.common.js:2608
Vue$3.$mount @ vue.common.js:6178
Vue$3.$mount @ vue.common.js:8549
init @ vue.common.js:1740
i @ vue.common.js:4174
o @ vue.common.js:4117
l @ vue.common.js:4242
o @ vue.common.js:4150
(anonymous) @ vue.common.js:4605
e._update @ vue.common.js:2635
(anonymous) @ vue.common.js:2609
Watcher.get @ vue.common.js:2934
Watcher @ vue.common.js:2926
e._mount @ vue.common.js:2608
Vue$3.$mount @ vue.common.js:6178
Vue$3.$mount @ vue.common.js:8549
e._init @ vue.common.js:3381
Vue$3 @ vue.common.js:3429
(anonymous) @ insights.js:12
25.lodash-compat @ insights.js:102
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ main.application.js:13
27../careers @ main.application.js:15
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
31.../../../scripts/main.application.js @ main.js:2
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1
vue-multiselect.min.js:1 Uncaught TypeError: this.internalValue.slice is not a function
at a.visibleValue (vue-multiselect.min.js:1)
at Watcher.get (vue.common.js:2934)
at Watcher.evaluate (vue.common.js:3042)
at Proxy. (vue.common.js:3240)
at Proxy.render (vue-multiselect.min.js:1)
at a.e._render (vue.common.js:2216)
at a. (vue.common.js:2609)
at Watcher.get (vue.common.js:2934)
at new Watcher (vue.common.js:2926)
at a.e._mount (vue.common.js:2608)

Can someone please help ?

[shentao]

When you import using require

const Multiselect = require('vue-multiselect')

you probably have to specify the default import like this:

components: {
  Multiselect: Multiselect.default
}

[wahiche-architech]

So I have done both of those things and still getting the exact same error.

[shentao]

Please show the markup you use and the data you pass into Multiselect.

[wahiche-architech]

track-by="name"
:custom-label="setOptionLabel"
placeholder="Select one"
:options="options"
:searchable="false"
:close-on-select="true"
:show-labels="false"
:allow-empty="false"
:multiple="true">

options:Array[7]
0:Object
name:"All Insights"
1:Object
name:"business1"
2:Object
name:"engineering1"
3:Object
name:"servicedesign"
4:Object
name:"strategy"
5:Object
name:"pastevent"
6:Object
name:"team"

[shentao]

If you want me to spend my time helping you, please take your time to post the markup / data properly. ;]

Also: Uncaught TypeError: this.internalValue.slice is not a function suggests that you’re passing incorrect value inside :value. If it’s a multiple select, the :value should be an array [].

[wahiche-architech]

I appreciate the assistance. I do not normally go online and ask questions so I am not used to the formatting that you may be requesting. So the :value being an array could be the issue, I will take a look at that and get back to you on Tuesday of next week. Thanks again for your quick responses. Have a great weekend.

[wahiche-architech]

So it looks like my :value is an array of objects exactly like the example on the site. Here is my markup and my code.

<multiselect v-model="value" track-by="name" :custom-label="setOptionLabel" placeholder="Select one" :options="options" :searchable="false" :close-on-select="true" :show-labels="false" :allow-empty="false"></multiselect>

components: {Multiselect: Multiselect.default}, data: { insights: [], options: [], value: {'name': 'All Insights'}, loadMore: true, apiLink: 'http://architechca-authoring.canadacentral.cloudapp.azure.com:8080/api/es/search/', apiOffset: 0, pageNumber: 0, allInsightsLength: 0 }