search

vueform / multiselect

Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).
https://vueform.com
MIT License
808 stars 151 forks source link

`getOption` does not work when `value` is an object. #407

Open mathieutu opened 6 months ago

mathieutu commented 6 months ago

Version

Description

Hi, thanks for your great package. When using an object as value, we can' t properly set the modelValue from the outside:

https://github.com/vueform/multiselect/blob/f8af61b2628337fdb66f5dec6982fb6e73f2caac/src/composables/useOptions.js#L545-L547

Indeed, String(val) will be [Object object], as well as String(o), so the first object item in the list will be selected.

We could either use JSON.stringify instead of String, or let the user provide their own function.

What would you think?

I'd be glad to open a PR. Mathieu.

Demo

https://jsfiddle.net/jhrbdwk6/

mathieutu commented 6 months ago

I've patched the package with yarn patch, and 

-    return eo.value[eo.value.map(o => String(o[valueProp.value])).indexOf(String(val))]
+    return eo.value[eo.value.map(o => JSON.stringify(o[valueProp.value])).indexOf(JSON.stringify(val))]

works pretty well.

(Btw I also wonder why you use an indexOf, instead of doing a standard find:

return eo.value.find(o => JSON.stringify(o[valueProp.value]) === JSON.stringify(val));

)