v-autocomplete "搜索" 以获取数据槽中的更多信息答案

【问题标题】：v-autocomplete "search" for more information in the data slotsv-autocomplete "搜索" 以获取数据槽中的更多信息
【发布时间】：2020-12-16 01:19:34
【问题描述】：

我有一个像这样的 v-autocomplete：

            <v-autocomplete
              :items="hostproperties"
              label="Search Host Properties"
              prepend-icon="mdi-tune"
              item-text="propertyvalue"
              item-value="host_id"
              @change="showHost"
            >
              <template slot="selection" slot-scope="data">
                {{ data.item.hostpropertytype.name }} - {{ data.item.propertyvalue }} - {{ data.item.hostpropertytype.unit }}
              </template>
              <template slot="item" slot-scope="data">
                {{ data.item.hostpropertytype.name }} - {{ data.item.propertyvalue }} - {{ data.item.hostpropertytype.unit }}
              </template>
            </v-autocomplete>

一切都很完美。但是我想优化一件事。事实上，当我当前输入自动完成字段时，它只搜索item-text="propertyvalue"。有没有办法告诉自动完成也搜索槽数据？所以这也为

{{ data.item.hostpropertytype.name }}} - {{{ data.item.propertyvalue }} - {{{ data.item.hostpropertytype.unit }}

可以搜索吗？我希望能够搜索以下字段：

hostpropertytype.name
propertyvalue
hostpropertytype.unit

【问题讨论】：

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

According to the docs，您可能需要将 filter 方法传递给您的 v-autocomplete，它指示您想要的自定义逻辑。

在您的v-autocomplete上

<v-autocomplete
  :items="hostproperties"
  :filter="filter"
  label="Search Host Properties"
  prepend-icon="mdi-tune"
  item-text="propertyvalue"
  item-value="host_id"
  @change="showHost"
>
  <template slot="selection" slot-scope="data">
    {{ data.item.hostpropertytype.name }} - {{ data.item.propertyvalue }} - {{ data.item.hostpropertytype.unit }}
  </template>
  <template slot="item" slot-scope="data">
    {{ data.item.hostpropertytype.name }} - {{ data.item.propertyvalue }} - {{ data.item.hostpropertytype.unit }}
  </template>
</v-autocomplete>

关于你的方法：

showHost() {...},
filter(item, queryText, itemText) {
  const searchText = queryText.toLowerCase();

  // define your custom logic of your filter
  const name = item.hostpropertytype.name.toLowerCase();
  const value = item.propertyvalue.toString();
  const unit = item.hostpropertytype.unit.toString();

  return (
    name.indexOf(searchText) > -1 ||
    value.indexOf(searchText) > -1 ||
    unit.indexOf(searchText) > -1
  );
}

这里是工作 demo 的示例演示。

【讨论】：