diff --git a/docs/content/2.components/select-menu.md b/docs/content/2.components/select-menu.md index 5363d147bc..43f90c0947 100644 --- a/docs/content/2.components/select-menu.md +++ b/docs/content/2.components/select-menu.md @@ -50,7 +50,7 @@ componentProps: --- :: -If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. +If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.The value of the `value-attribute` field in options must be unique. ::component-example --- diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue index 43e800a241..212bddba84 100644 --- a/src/runtime/components/forms/SelectMenu.vue +++ b/src/runtime/components/forms/SelectMenu.vue @@ -174,7 +174,7 @@ export default defineComponent({ inheritAttrs: false, props: { modelValue: { - type: [String, Number, Object, Array], + type: [String, Number, Object, Array, Boolean], default: '' }, query: { @@ -362,7 +362,7 @@ export default defineComponent({ } else { return null } - } else if (props.modelValue) { + } else if (props.modelValue !== undefined && props.modelValue !== null) { if (props.valueAttribute) { const option = props.options.find(option => option[props.valueAttribute] === props.modelValue) return option ? option[props.optionAttribute] : null @@ -387,7 +387,7 @@ export default defineComponent({ variant?.replaceAll('{color}', color.value), (isLeading.value || slots.leading) && ui.value.leading.padding[size.value], (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value] - ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass) + ), props.placeholder && (props.modelValue === undefined && props.modelValue === null) && ui.value.placeholder, props.selectClass) }) const isLeading = computed(() => {