VaSelect using objects as options: get get full object on select event

[beard7]

When using objects as options for a VaSelect, I often need to update two (or more) model properties with properties from the selected option.

This is not easy with VaSelect as the selected value is the option property specified by valueBy: there's no event that provides the full object, unless you don't use valueBy which introduces other issues.

A @select event that provides the selected object would be really useful.

[m0ksem]

What “other” issues do you have if valueBy is not used?

unless you don't use valueBy which introduces other issues.

[beard7]

Well, if valueBy is not used, v-model will be bound to the whole object, rather than, say, the object id. So, let's say I have a VaSelect that I want to use to set both 'user_id' and 'user_name' in the model... this will provide the full option in the @update event, but it will also set model.uer_id to the whole object:

<VaSelect
v-model="model.user_id"
:options="users"
text-by="name"
track-by="id"
@update:modelValue="selectUser" />

I've resorted to using a computed property with getter and setter, which work well, but I'm not sure if it's the easiest solution:

...
<VaSelect
  v-model="user"
  label="User"
  :options="users"
  text-by="name"
  :value-by="(option) => { 
    return { id: option.id, name: option.name };
  }"
/>
...

...
const user = computed({
    get() {
        return { id: model.value.user_id, name: model.value.user_name};
    },
    set(value) {
        model.value.user_id = value.id;
        model.value.user_name = value.name;
    },
});
...

[m0ksem]

You can use trackBy set to user_id instead of id and changing shape of your option.