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

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!

CodePudding user response：

Try like following snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dLevelSelected: null,
      dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}]
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-select v-model="dLevelSelected" :items="dLevels" solo item-text="description" item-value="value">
          <template v-slot:preppend-item>
            <span>{{ description }}</span>
          </template>
        </v-select>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

CodePudding user response：

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