Vuetify 在 v-select 的 item-text 中连接两个字段 [英] Vuetify concatenate two fields in v-select's item-text

问题描述

有没有办法在 v-select 的 item-text 字段中将两个字段连接在一起?

Is there a way to concatenate two fields together in a v-select's item-text field?

我将它用于下拉列表值，但可见条目不显示这两个字段.

I have it working for the drop down list values, but the visible entry doesn't show the two fields.

问题出在这里:item-text="'${data.item.name}, ${data.item.group}'"

Problem is here: 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?编辑=1010

谢谢

推荐答案

你需要为槽item和槽selection定义一个模板，当使用 :

You need to define a template not only for the slot item but also for the slot selection when using <v-select>:

<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

供参考.

这也可以是一个更简单的解决方案，就像您想要实现的那样:

This can also be a much simpler solution like the one you're trying to achieve:

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

也可以看看它的实际效果:

Also see it in action:

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

这篇关于Vuetify 在 v-select 的 item-text 中连接两个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！