diff --git a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue index 11dc181e..af7f301a 100644 --- a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue +++ b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue @@ -13,7 +13,7 @@ const people = [{ name: 'Tom Cook' }] -const selected = ref(people[0].name) +const selected = ref(people[0].id) diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue index 515d465b..be5f7273 100644 --- a/src/runtime/components/forms/SelectMenu.vue +++ b/src/runtime/components/forms/SelectMenu.vue @@ -36,8 +36,7 @@ - {{ modelValue.length }} selected - {{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }} + {{ label }} {{ placeholder || ' ' }} @@ -355,6 +354,23 @@ export default defineComponent({ } }) + const label = computed(() => { + if (props.multiple) { + if (Array.isArray(props.modelValue) && props.modelValue.length) { + return `${props.modelValue.length} selected` + } else { + return null + } + } else { + if (props.valueAttribute) { + const option = props.options.find(option => option[props.valueAttribute] === props.modelValue) + return option ? option[props.optionAttribute] : null + } else { + return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute] + } + } + }) + const selectClass = computed(() => { const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant] @@ -509,6 +525,7 @@ export default defineComponent({ popper, trigger, container, + label, isLeading, isTrailing, // eslint-disable-next-line vue/no-dupe-keys