Vue 3 - multiselect

[Vedran Hudec]

Hi,

the same wrapped control (extended), works on one page, the other one does not. So have a chance to look at your code (ej2-vue-dropdowns/multiselect.component.js). The problem occurs in two ways:

- one checkbox (type) wont render at all (setAttribute error)

- two setting initial value fails (as the component wish basis), what does this mean

https://v3.vuejs.org/guide/migration/v-model.html

On above link, we have breaking change on behavior of v-model:value from value to modelValue, yet in your code of multiselect.component.js

export var modelProps (line 26) = ['value'], few lines later will see emitProbs binding to update:value - which will not properly work with vue3.

If extended control, has modelValue (set properly with v-model:value), the modelValue is set, but if we pass as "vue 3" with v-model:value="modelValue" to your component - you will not "always" (there is times it does work) - pass the value to (your internal) this.value.

BR

[Vedran Hudec]

If I put on ejs-multiselect

1) v-model="modelValue" (which is a prop of extended control)

In (chrome-vue) can be seen

Props (value is null -> which is confirmed through your code (line 3760) ej2-dropdowns/src/multi-select.js) -

(MultiSelect.prototype. checkInitialValue )

Attrs (modelValue: array(2), onUpdate:modelValue f)

2) v-model:value="modelValue"

value: array(2) - but when component is rendered there is no selected items

also on above mentioned line of code 3760, this.value && this.value.length (iz empty and zero)

How is this possible?

BR

[Vedran Hudec]

3rd edit, for you to note this:

https://v3.vuejs.org/guide/migration/watch.html#overview

If I have in data (which is function)

data: return {

element.values = [];

}

and

in extended control set this as: v-model="element.values". The 'ejs-multiselect' will not see the change happens as it's array and by migration guide you need to put "deep:true" to notice the change of array (and you're probably watching value only)!

The destroy of element as object and recreate of element.values is a ugly-fix workaround for this.

[Berly Christopher]

Hi Vedran Hudec, 

  

Greetings from Syncfusion support. 

  

We have prepared the sample by binding the v-model property for MultiSelect component with checkbox mode in vue 3 confuguration and attached it below. 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue31397577520  

  

Screenshot: 

  

 

  

Still issue persists, please modify the attached sample with reported issue that will help us to check and proceed further from our end. 

  

Regards, 

Berly B.C 

[Vedran Hudec]

Hi,

sorry, for late reply - it's working. Will mark above as answer, as the question was I can't make it work.

But setting a value as array, still does not - I hope I'll find some time to prepare an example for you (like you did for me). Your value vs. modelValue is still in confused state. There is something wrong - the control does not crash, but "about wrong" part, what happens is:

- when initialized with empty value (empty array), control display correctly "placeholder" and "filterplacholder"

- when set an array value, control does not display placeholder/filterplaceholder text, as it tried to set value, but failed in process (there is no error in console.log whatsoever)

BR,

Vedran

[Vedran Hudec]

Hi support,

Manage to solve the "problem", with multiselect. Solution is easy one:

in setup(){

const selected_object = reactive([]);

return {

    selected_object

}

}

on control: v-model = selected_object.

Then the ejs-multiselect control works properly.

BR

[Berly Christopher]

Hi Vedran, 

  

We are glad to know that the issue is resolved in your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C