Estoy tratando de mostrar texto personalizado en las opciones de selección en v por ranuras.
Modelo:
<v-select v-model="dLevelSelected" :items="dLevels" solo> <template slot="item" slot-scope="data"> <span>{{data.description}}</span> </template> </v-select>Guion:
data () { return { dLevelSelected: null, dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}] } }Con esto, cuando abres el v-select, los dos registros de dLevels están apareciendo como cuadros pero con cualquier texto. Parece que data.description se está evaluando como data.undefined
¡Gracias!
slot y slot-scope están obsoletos a partir de Vue 2.6.0.
La nueva sintaxis de tragamonedas combina esos dos accesorios en v-slot , por lo que la tragamonedas de item equivalente es:
<template v-slot:item="scope"> <span>{{ scope.item.description }}</span> </template> Tenga en cuenta que el scope contiene una propiedad de item que se puede utilizar para acceder a la description . Puede usar la desestructuración de objetos para simplificar eso a:
<template v-slot:item="{ item }"> <span>{{ item.description }}</span> </template> De manera similar, probablemente querrá una ranura de selection personalizada que represente la apariencia del elemento seleccionado:
<template v-slot:selection="{ item }"> <span>{{ item.description }} ({{ item.value }})</span> </template>La plantilla final debería verse similar a esto:
<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>