Vue-multiselect: Can't handle `undefined` value

[lionel-bijaoui]

Hello,
when value is set to undefined, the console show these messages:

vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "function (){return this.multiple?this.value.slice(0,this.limit):this.value}": TypeError: Cannot read property 'slice' of undefined (found in component: <multiselect>)warn @ vue.common.js?e881:1019Watcher.get @ vue.common.js?e881:3176Watcher.evaluate @ vue.common.js?e881:3356computedGetter @ vue.common.js?e881:8035(anonymous function) @ VM46429:3Watcher.get @ vue.common.js?e881:3173Watcher.run @ vue.common.js?e881:3314runBatcherQueue @ vue.common.js?e881:3071flushBatcherQueue @ vue.common.js?e881:3041nextTickHandler @ vue.common.js?e881:445
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "multiple && max === value.length": TypeError: Cannot read property 'length' of undefined (found in component: <multiselect>)warn @ vue.common.js?e881:1019Watcher.get @ vue.common.js?e881:3176Watcher.run @ vue.common.js?e881:3314runBatcherQueue @ vue.common.js?e881:3071flushBatcherQueue @ vue.common.js?e881:3041nextTickHandler @ vue.common.js?e881:445
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "!max || value.length < max": TypeError: Cannot read property 'length' of undefined (found in component: <multiselect>)

A simple check to convert undefined to an empty array could be an easy solution, no ?

[shentao]

How do you initiate the component? The value property is a private one and it shouldn’t become undefined. Could you provide steps to reproduce?

[lionel-bijaoui]

Thank you for your answer, I'm sorry to not have provided more details.

I have implemented vue-multiselect in vue-form-generator in an effort to make it less dependent on jQuery and bootstrap.
In our dev sandbox, you can see randomly created data (fake users), modify them and update them. There is a button to add a new user from scratch, and this function reset every field value to undefined.
If you want to test it, simply clone the latest version of the project, then do:

npm install
npm run dev

It will launch a local server that point to http://localhost:8080/ and you can test the project.

I have implemented you plugin as a simple multiselect component. Maybe I should directly use multiselectMixin.js and pointerMixin.js ?

Thank you for your help, it is very appreciated :+1:

[shentao]

Thanks for more details!
I will try to look into it this week! :)

[shentao]

This should be working by now in the beta version.

[icebob]

The issue is alive:

Tested with beta 13: https://unpkg.com/[email protected]

[icebob]

I created an fiddle for you: https://jsfiddle.net/icebob/0mg1v81e/174/

The "skills" field is an multiselect component.
If you press the "New" button top of page, check the console and you will see the error.

[icebob]

Could you check it?

[shentao]

This will be fixed in beta.14 (already on master). Should be published tomorrow.

[icebob]

Thank you!

[icebob]

Working properly. Thanks!