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]" >