Vuetify在v-select的项目文本中连接两个字段

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？edit = 1010

谢谢

Answer 1

您不仅需要为插槽定义模板item,还需要selection在使用时为插槽定义模板<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

以供参考.

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

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

另见行动:

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

Answer 2

对于David Folkner：您可以将:filter="customFilter"属性添加到自动完成组件中，然后在方法块中添加实现自定义搜索的customFilter 函数。

例如，如果您的项目列表由具有id、function和description属性的 n 个 item 对象组成，则应该执行以下操作来搜索 function 和 description 属性：

自动完成组件：

<v-autocomplete v-model="itemSelected" :items="items" required box chips label="Select an Item" item-value="id" item-text="description" :filter="customFilter">
    <template slot="selection" slot-scope="data">
        <v-chip :selected="data.selected" class="chip--select">
            {{data.item.function}} - {{ data.item.description }}
        </v-chip>
    </template>
    <template slot="item" slot-scope="data">
        <v-list-tile-content>
            <v-list-tile-title v-html="data.item.function +' - '+ data.item.description"></v-list-tile-title>
        </v-list-tile-content>
    </template>
</v-autocomplete>

方法：

methods: {
    customFilter (item, queryText, itemText) {
        const textOne = item.function.toLowerCase()
        const textTwo = item.description.toLowerCase()
        const searchText = queryText.toLowerCase()
        return textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
    }
}