V-selectの項目 - テキスト内の2つの項目を連結してVoyetify

Question

v-selectの項目 - テキストフィールドに2つの項目を連結する方法はありますか？

ドロップダウンリストの値に対して機能していますが、表示されているエントリには2つのフィールドが表示されません。

問題はここにある：アイテムテキスト= " '$ {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