时间戳

首页 > 解决方案 > v-autocomplete "搜索" 以获取数据槽中的更多信息

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

问题描述

我有一个像这样的 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

标签： javascriptvue.jsvue-componentvuetify.js

解决方案

根据文档，您可能需要将一个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
  );
}

这是一个工作演示的示例演示。

推荐阅读