I have integrated Vuetify into my project and encountered an issue with the select component. Here is how I have set it up:
<v-select
v-model="gender.value"
:items="gender.items"
label="Gender"
:solo="true"
append-icon="">
</v-select>
....
data: () => ({
gender: {
value: null,
items: ['male', 'female']
}
})
When I select a value, instead of displaying it within the input field, it shows up like this: https://gyazo.com/10129a3b111947c04b7db3f4212ad78b. How can I make it appear inside the input field as expected? Any insights on what might be causing this behavior would be greatly appreciated. I couldn't find any relevant information in the Vuetify documentation regarding a similar display of selected values. Thank you!