Dígame si podemos personalizar item-text para v-select .
Quiero personalizar cada elemento en v-select , algo como esto:
:item-text="item.name - item.description"Sí, puede usar scoped slot con alcance como se describe en el documento y proporcionar una template .
Para v-select , tiene dos scoped slot :
selection : para describir cómo v-select debe representar los elementos cuando se seleccionanitem : para describir cómo v-select debería representar los elementos cuando se abrenSe parece a esto :
<v-select> // Don't forget your props <template slot="selection" slot-scope="data"> <!-- HTML that describe how select should render selected items --> {{ data.item.name }} - {{ data.item.description }} </template> <template slot="item" slot-scope="data"> <!-- HTML that describe how select should render items when the select is open --> {{ data.item.name }} - {{ data.item.description }} </template> </v-select>CodePen con un ejemplo complejo
Vuetify Doc sobre slot con alcance en V-Select
Editar para Vuetify 1.1.0+ : esas ranuras también están disponibles con los nuevos componentes v-autocomplete y v-combobox , ya que heredan de v-select .
Editar para Vue 2.6+ , reemplazar:
slot="selection" slot-scope="data" por v-slot:selection="data"slot="item" slot-scope="data" by v-slot:item="data"Taquigrafía:
:item-text="item => item.name +' - '+ item.description"La ranura elimina la selección automática al enfocar.
item-text tye puede ser: string | array | function
entonces podemos hacer:
:item-text="text"y
methods: { text: item => item.name + ' — ' + item.description }