diff --git a/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue index 500e259c..31904b25 100644 --- a/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue +++ b/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue @@ -13,14 +13,14 @@ const people = [{ name: 'Tom Cook' }] -const selected = ref(people[0].name) +const selected = ref(people[0].id) diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue index dfb3cedf..c7c50dc9 100644 --- a/src/runtime/components/forms/InputMenu.vue +++ b/src/runtime/components/forms/InputMenu.vue @@ -19,7 +19,7 @@ :class="inputClass" autocomplete="off" v-bind="attrs" - :display-value="() => query ? query : ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute]" + :display-value="() => query ? query : label" @change="onChange" /> @@ -293,6 +293,15 @@ export default defineComponent({ } }) + const label = computed(() => { + 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 inputClass = computed(() => { const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant] @@ -423,6 +432,7 @@ export default defineComponent({ popper, trigger, container, + label, isLeading, isTrailing, // eslint-disable-next-line vue/no-dupe-keys