vuejs3 vuetify.js items v-select vuetifyjs3

Vuetify v-select items-text property does not work in v3. (Fill value in v-select Vue3)

I use Vuetify v3 and try to fill a v-select by using items and items-text property but it doesn't work. The v-select display 2 empty slot.

<v-select ref="structure" :items="structures"  item-text="name" item-value="uuid" label="Structure" v-model="listStructure" return-object ></v-select>

The data is correctly filled in with an Get request in the create method of the page.

But the list seems two have two data but empty.

Below the example of one data

{
  "name": "strcuture1",
  "uuid": "1b0d3f5f-8806-47a5-be63-cef12865c07b"
}

Solution

In v.3 you should use item-title="name" instead of item-text="name".

They have changed from item-text in v2.6 to item-title in v3.

Check the 'v-select/v-combobox/v-autocomplete' section of the Vuetify's Upgrade Guide.

Here is the playground:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify;

const App = {
  data() {
      return {
          listStructure: null,
          structures: [
            {
              "name": "structure1",
              "uuid": "1b0d3f5f-8806-47a5-be63-cef12865c07b"
            },
            {
              "name": "structure2",
              "uuid": "1b0d3f5f-8806-47a5-be63-cef12865c07b"
            }            
          ]
      }
  }
}

const vuetify = createVuetify();
const app = createApp(App);
app.use(vuetify);
app.mount('#app');

<link href="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.css" rel="stylesheet"></link>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.js"></script>

<div id="app">
  <v-select ref="structure" :items="structures"  item-title="name" item-value="uuid" label="Structure" v-model="listStructure" return-object ></v-select>
  Selected:<br/>
  <span v-if="listStructure != null">
    Name: {{listStructure.name}}<br/>
    uuid: {{listStructure.uuid}}
  </span>
</div>