SelectMenu label by options

[ElYaiko]

Description

When using optionAttribute in USelectMenu is selecting the label from the actual modelValue instead of the options.
It would be more useful get the label from the actual options so an additional slot label has not to be created just to show the needed attribute (ex: name) instead of the the value (ex: id).

Thanks!.

Additional context

No response

[Hossein-Mirazimi]

I'm not sure if the proposed solution is the best approach. The modelValue is already being selected from the options, and updating the modelValue also updates the label text from the optionAttribute key. Therefore, I'm not sure if the proposed solution would add much value.

[ElYaiko]

I'm not sure if the proposed solution is the best approach. The modelValue is already being selected from the options, and updating the modelValue also updates the label text from the optionAttribute key. Therefore, I'm not sure if the proposed solution would add much value.

I think this component should be improved because you also have the by prop to compare the VModel and valueAttribute to define the VModel, so it's a bit confusing.

It would be better to work with only one prop when working with objects, no valueAttribute will compare and define with full object and when set will compare and define with the defined property, and optionAttribute to only specify the label.

[Hossein-Mirazimi]

I'm not sure if the proposed solution is the best approach. The modelValue is already being selected from the options, and updating the modelValue also updates the label text from the optionAttribute key. Therefore, I'm not sure if the proposed solution would add much value.

I think this component should be improved because you also have the by prop to compare the VModel and valueAttribute to define the VModel, so it's a bit confusing.

It would be better to work with only one prop when working with objects, no valueAttribute will compare and define with full object and when set will compare and define with the defined property, and optionAttribute to only specify the label.

I think you right

I fix this as soon as possible

I plan to remove by props and only use valueAttribute to clarify how to use selectmenu

[Hossein-Mirazimi]

@benjamincanac

What do you think about this enhancement suggestion?

[benjamincanac]

@Hossein-Mirazimi The by prop is used underneath by Headless UI Combobox component: https://headlessui.com/vue/combobox#binding-objects-as-values, you cannot remove it.

[ElYaiko]

@Hossein-Mirazimi The by prop is used underneath by Headless UI Combobox component: https://headlessui.com/vue/combobox#binding-objects-as-values, you cannot remove it.

@benjamincanac
Yes, but you could do this improvement internally so this component would be easier to use.

[benjamincanac]

I'm not sure to understand the issue here. Is this about the optionAttribute or the valueAttribute? Because the displayed value already comes from the modelValue: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue#L40

[ElYaiko]

I'm not sure to understand the issue here. Is this about the optionAttribute or the valueAttribute? Because the displayed value already comes from the modelValue: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue#L40

Both, optionAttribute because is showing the label from the modelValue and valueAttribute because requires an additional prop by to work properly.

I think this component should be improved because you also have the by prop to compare the VModel and valueAttribute to define the VModel, so it's a bit confusing.

It would be better to work with only one prop when working with objects, no valueAttribute will compare and define with full object and when set will compare and define with the defined property, and optionAttribute to only specify the label.