-
Notifications
You must be signed in to change notification settings - Fork 493
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(SelectMenu): add selected to label
/ leading
/ trailing
slots props
#1349
Conversation
Not sure to understand the point of exposing the |
The purpose of this change was to allow access to the original object (value) when the
However, there are a few points for discussion. The Also, when the (I'll add documentation after we resolve the points above) |
@@ -355,17 +359,34 @@ export default defineComponent({ | |||
} | |||
}) | |||
|
|||
const selected = computed(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure to understand why you added this computed, could you provide a real-life example where you need this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure!
When you change the selected value using the value-attribute
prop, there is currently no way (at least as far as I'm aware) to access the remaining attributes of the selected object.
Let's say we have an array of categories with translated names:
const categories = [
{
id: 1,
name: {
en: 'Category',
de: 'Kategorie',
// ...
},
},
// ...
]
This is how I would use it:
<USelectMenu
:options="categories"
value-attribute="id"
>
<template #label="{ selected }">
{{ useLocalizedValue(selected.name) }}
</template>
</USelectMenu>
This applies to the #leading
and #trailing
slots as well. Currently, you wouldn't be able to access any icon attributes of the object in those slots, if you changed the value-attribute
, would you? So it might be worth adding this to those slots as well.
<!-- example from the docs -->
<template>
<USelectMenu v-model="selected" :options="people"> <!-- if we add `value-attribute="id"`, this won't work -->
<template #leading>
<UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
<UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
</template>
</USelectMenu>
</template>
Or am I missing something?
is there a solution to show selected.name in label slot, when i override value-attribute? |
@lammerfalcon this is exactly what this PR is meant to solve |
label
slot props
label
slot propslabel
/ leading
/ trailing
slots props
Thanks @CernyMatej and sorry for the delay! |
β¦ots props (nuxt#1349) Co-authored-by: Benjamin Canac <[email protected]>
@CernyMatej It seems this PR fixed the Would you have an idea? |
It seems to be only an issue on mount. When I select the items manually, the count is correct. |
π Linked issue
Resolves #1974
β Type of change
π Description
Currently, it is not possible to access the selected value in the
label
slot.This PR adds it to the slot data of the label slot.
π Checklist