As I embark on my journey with Vue.js and Vuetify, I've encountered a simple issue with the v-combobox component that has me stumped:
Picture this scenario: I want a combobox that offers three distinct options. The code snippet below functions perfectly (Codepen A):
<div id="app">
<v-app>
<v-container fluid>
<v-combobox
v-model="selectedItem"
:items="items"
item-text="label"
label="Item"
filled
></v-combobox>
</v-container>
</v-app>
</div>
const myVue = new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
selectedItem: null,
items: [
{id: 1, label: "one"},
{id: 2, label: "two"},
{id: 3, label: "three"}
]
};
}
});
Now, let's say I want to tweak the item-text attribute to apply a slightly more complex transformation (Codepen B):
<v-combobox
:item-text="item => item.label.toUpperCase()"
...
></v-combobox>
After this change, all suggestions appear in uppercase, but selecting one only seems to work initially. Subsequent attempts to choose a different option fail.
I can't seem to figure out what's causing this issue. Any insights on what might be going awry?