[SOLVED] Veutify v3 multiple select component event binding cannot use @select or @remove

Veutify v3 multiple select component event binding cannot use @select or @remove

Hi I'm new to veutify and can't seem to find any solution to this question.

in the multiple select component what I would like to achieve is to get the value of the selected option and call a function with @select and @remove. It seems like the event didn't trigger as expected and I wonder is there anyway to achieve what I want.

//HTML component

<v-select
                                multiple
                                return-object
                                name="t-columns" v-model="state.selectedColumns"
                                :label="$t('column_visibility')"
                                :items="vTableColumnVisibility" item-title="name" item-value="id"
                                @select="onToggleColumn" @remove="onToggleColumn"
                            >

//onToggleColumn function

 const onToggleColumn = (option: interfaces.ISelectOption): void => {
//Option at here should provide me the object of selected value that I choose from the v-select multiple component

const ctable = dataTable.value.dt;
let column = ctable.column(option.id);

column.visible(!column.visible());

};

Note: I tried with @update:model-value="onToggleColumn" instead of @select and @remove but this would return an array of selected values which is not what I really want. I want the value which I targeted.

Solution

According to the vuetify 3 docummentation, neither "change" or "remove" event are emited by the v-select component (see: https://vuetifyjs.com/en/api/v-select/#events)

=> This is why your onToggleColumn function is never called

You do not have other choise to use update:modelValue event whish will return an array in your case due to the "multiple" attribut