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)
@@ -21,7 +21,7 @@ const selected = ref(people[0].name)
v-model="selected"
:options="people"
placeholder="Select people"
- value-attribute="name"
+ value-attribute="id"
option-attribute="name"
/>
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