[Vuejs]-Vue Run-time MultiSelect Component creation with CreateApp – Failing to Bind Model Value

This one worked. The two-way data-binding actually didn’t take place when we create the control dynamically (even though that works alright at design-time).

selectedRegions needs to be a ref of array

ref([])

modelValue needs to be the value of the ref variable (as is the rule for ref variable).

modelValue: selectedRegions?.value

And the selection needed to be set in the onChange event.

onChange: (event: any) => {
  selectedValues.value?.splice(0, selectedValues.value.length);
  event.value.forEach((element: any) => {
      selectedValues?.value?.push(element);
  });

splice is used to clear out the model as each click event comes with only the selected items. After clearing, we push the value to the model.

So the overall code looks like below.

var componentApp = createApp(MultiSelect, {
  maxSelectedLabels: 3,
  options: regions,
  optionLabel: (v: any) => `${v.selectionLabel}`,
  placeholder: selectionName.toLowerCase(),
  name: selectionName,
  multiple: true,
  filter: true,
  modelValue: selectedValues?.value,
  onChange: (event: any) => {
    selectedValues.value?.splice(0, selectedValues.value.length);
    event.value.forEach((element: any) => {
        selectedValues?.value?.push(element);
    });
  },
});