[SOLVED] Vue v-select problem with v-slot not showing text

Vue v-select problem with v-slot not showing text

I'm trying to display custom text in v-select options by slots.

Template:

<v-select v-model="dLevelSelected" :items="dLevels" solo>
  <template slot="item" slot-scope="data">
    <span>{{data.description}}</span>
  </template>
</v-select>

Script:

data () {
  return {
    dLevelSelected: null,
    dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}]
  }
}

With this, when you open the v-select the two registers of dLevels are appearing as boxes but with any text. It seems like the data.description is being evaluated like data.undefined

Thanks!

Solution

slot and slot-scope are deprecated as of Vue 2.6.0.

The new slot syntax combines those two props into v-slot, so the equivalent item slot is:

<template v-slot:item="scope">
  <span>{{ scope.item.description }}</span>
</template>

Note the scope contains an item property that can be used to access description. You can use object destructuring to simplify that to:

<template v-slot:item="{ item }">
  <span>{{ item.description }}</span>
</template>

Similarly, you'll probably want a custom selection slot that renders the appearance of the selected item:

<template v-slot:selection="{ item }">
  <span>{{ item.description }} ({{ item.value }})</span>
</template>

The final template should look similar to this:

<v-select v-model="dLevelSelected" :items="dLevels" solo>
  <template v-slot:item="{ item }">
    <span>{{ item.description }}</span>
  </template>
  <template v-slot:selection="{ item }">
    <span>{{ item.description }} ({{ item.value }})</span>
  </template>
</v-select>

demo