CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
goofy4224
goofy4224

Reputation: 310

Vuetify: item-text attribute breaks v-combobox

I'm only getting started with Vue.js and Vuetify and I'm having a very simple issue concerning the v-combobox component:

Let's say, I would like to display a combobox offering three different options. The following example works just fine (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 change the item-text attribute to perform just a slightly more complex transformation (Codepen B):

<v-combobox
    :item-text="item => item.label.toUpperCase()"
    ...
></v-combobox>

Now, all suggestions are displayed in uppercase letters, but selecting one only works on the first try. It's impossible to select a different option after that.

I really don't see what's wrong here. What am I missing?

Upvotes: 0

Views: 5424

Answers (1)

Idan
Idan

Reputation: 5450

v-model can be limited with change options

Using :value should do the work

<div id="app">
  <v-app>
    <v-container fluid>
          <v-combobox
              :value="selectedItem"
              :items="items"
              :item-text="item => item.label.toUpperCase()"
              label="Item"
              filled
          ></v-combobox>
    </v-container>
  </v-app>
</div>

Upvotes: 2

Related Questions