2017-12-28 20 views
0

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

ドロップダウンリストの値に対して機能していますが、表示されているエントリには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のためだけではなく、テンプレートを定義する必要が

+0

あなたは、のような、より明確にすることができますあなたの問題は何ですか? – connexo

+0

名前グループのフィールド値を表示する代わりに、[オブジェクトオブジェクト]が表示されます。 – Derek

+0

あなたは私の答えをチェックする時間がかかりましたか? – connexo

答えて

0

ありがとう:

<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

+1

これは完璧に働いて、ありがとう! – Derek

+0

次に、この回答をあなたの問題を解決するものとしてマークしてください。 – connexo

関連する問題