V-select의 item-text에서 두 개의 필드를 연결하여 Vuetify

Question

v-select의 item-text 필드에 두 개의 필드를 연결하는 방법이 있습니까?

드롭 다운 목록 값에 대해 작업하고 있지만 표시된 항목에 두 필드가 표시되지 않습니다.

문제는 여기에 있습니다 : 항목 텍스트 = " '$ {data.item.name}, $ {data.item.group}'"

코드 :

`<v-select label="Select" v-bind:items="people" v-model="e11" 
    item-text="'${data.item.name}, ${data.item.group}'" 
    item-value="name" max-height="auto" autocomplete > 
    <template slot="item" slot-scope="data"> 
    <v-list-tile-content> 
     <v-list-tile-title 
     v-html="`${data.item.name}, ${data.item.group}`"> 
     </v-list-tile-title> 
     <v-list-tile-sub-title 
     v-html="data.item.group"> 
     </v-list-tile-sub-title> 
    </v-list-tile-content> 
    </template> 
</v-select>` 

펜 예 : https://codepen.io/anon/pen/dJveWM?editors=1010

는 <v-select>를 사용하는 경우이 슬롯 item에 대한뿐만 아니라 슬롯 selection에 대한뿐만 아니라 템플릿을 정의 할 필요가

Answer 1

주셔서 감사합니다 :

<template slot="selection" slot-scope="data"> 
    <v-chip 
    close 
    @input="data.parent.selectItem(data.item)" 
    :selected="data.selected" 
    class="chip--select-multi" 
    :key="JSON.stringify(data.item)" 
    > 
    <v-avatar> 
     <img :src="data.item.avatar"> 
    </v-avatar> 
    {{ data.item.name }} 
    </v-chip> 
</template> 

는 참조 용

https://vuetifyjs.com/components/selects#6-scoped-slots

를 참조하십시오.

<template slot="selection" slot-scope="data"> 
    {{ data.item.name }}, {{ data.item.group }} 
</template> 

은 또한 행동에서 볼 :

https://codepen.io/anon/pen/PEpaMM?editors=1011