diff --git a/docs/components/content/examples/SelectExampleObjects.vue b/docs/components/content/examples/SelectExampleObjects.vue
new file mode 100644
index 00000000..6668d2b9
--- /dev/null
+++ b/docs/components/content/examples/SelectExampleObjects.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
index f5d7eda1..0966a78d 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/3.forms/3.select.md
@@ -27,6 +27,35 @@ const country = ref(countries[0])
```
::
+When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
+
+::component-example
+#default
+:select-example-objects
+
+#code
+```vue
+
+
+
+
+
+```
+::
+
### Style
Use the `color` and `variant` props to change the visual style of the Select.
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index b783afb3..0f261d65 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -15,7 +15,7 @@
v-if="option.children"
:key="`${option[valueAttribute]}-optgroup-${index}`"
:value="option[valueAttribute]"
- :label="option[textAttribute]"
+ :label="option[optionAttribute]"
>
@@ -150,9 +150,9 @@ export default defineComponent({
].includes(value)
}
},
- textAttribute: {
+ optionAttribute: {
type: String,
- default: 'text'
+ default: 'label'
},
valueAttribute: {
type: String,
@@ -175,25 +175,25 @@ export default defineComponent({
}
const guessOptionValue = (option: any) => {
- return get(option, props.valueAttribute, get(option, props.textAttribute))
+ return get(option, props.valueAttribute, get(option, props.optionAttribute))
}
const guessOptionText = (option: any) => {
- return get(option, props.textAttribute, get(option, props.valueAttribute))
+ return get(option, props.optionAttribute, get(option, props.valueAttribute))
}
const normalizeOption = (option: any) => {
if (['string', 'number', 'boolean'].includes(typeof option)) {
return {
[props.valueAttribute]: option,
- [props.textAttribute]: option
+ [props.optionAttribute]: option
}
}
return {
...option,
[props.valueAttribute]: guessOptionValue(option),
- [props.textAttribute]: guessOptionText(option)
+ [props.optionAttribute]: guessOptionText(option)
}
}
@@ -209,7 +209,7 @@ export default defineComponent({
return [
{
[props.valueAttribute]: '',
- [props.textAttribute]: props.placeholder,
+ [props.optionAttribute]: props.placeholder,
disabled: true
},
...normalizedOptions.value