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

by

3👍

✅

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

👤tony19

Leave a comment