Vue.js Vuetify带槽自动完成,键入时无自动完成建议

Vue.js Vuetify带槽自动完成,键入时无自动完成建议,vue.js,vuetify.js,v-autocomplete,Vue.js,Vuetify.js,V Autocomplete,我正在尝试制作一个小工具,其中有人会填写一些数据,这将是一个名称或id,字段显示一个自动完成列表。(最终结果将包含100多个结果,需要一个自动完成函数。) 我曾尝试使用Vuetify的自动完成功能,但我很难让它正确过滤。 我使用的是Vuetify提供的以下代码,没有编辑按钮()——我能够添加ID并在结果中显示它,并带有一个范围槽 但是,如果您在输入字段中键入了一些内容,它根本不会显示任何建议 我已经看了几个小时了,我一定忽略了什么。我清空了插槽,检查了方法,更改了| |并返回到它们。我现在不知道

我正在尝试制作一个小工具,其中有人会填写一些数据,这将是一个名称或id,字段显示一个自动完成列表。(最终结果将包含100多个结果,需要一个自动完成函数。)

我曾尝试使用Vuetify的自动完成功能,但我很难让它正确过滤。 我使用的是Vuetify提供的以下代码,没有编辑按钮()——我能够添加ID并在结果中显示它,并带有一个范围槽

但是,如果您在输入字段中键入了一些内容,它根本不会显示任何建议

我已经看了几个小时了,我一定忽略了什么。我清空了插槽,检查了方法,更改了| |并返回到它们。我现在不知道

HTML:


只需对最后一个
返回使用一行,它就可以工作了

返回filterName.indexOf(searchText)>-1 | | filterAbbr.indexOf(searchText)>-1 | | filterId.indexOf(searchText)>-1;

返回(
filterName.indexOf(searchText)>-1 |
Filterablebr.indexOf(searchText)>-1 |
filterId.indexOf(searchText)>-1
)

在上面的示例中,您使用的是组合框而不是v-autocompletecode@chans噢,见鬼!谢谢
<div id="app">
  <v-app id="inspire">
    <v-card
      class="overflow-hidden"
      color="blue lighten-1"
      dark
    >
      <v-toolbar
        flat
        color="blue"
      >
        <v-icon>mdi-account</v-icon>
        <v-toolbar-title class="font-weight-light">Title</v-toolbar-title>
      </v-toolbar>
      <v-card-text>      
        <v-combobox                      
          :items="states"
          :filter="customFilter"
          color="white"
          label="State"
          clearable
        >

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

        </v-combobox>
      </v-card-text>
    </v-card>
  </v-app>
</div>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      model: null,
      states: [
        { name: 'Florida', abbr: 'FL', id: '1' },
        { name: 'Georgia', abbr: 'GA', id: '2' },
        { name: 'Nebraska', abbr: 'NE', id: '3' },
        { name: 'California', abbr: 'CA', id: '4' },
        { name: 'New York', abbr: 'NY', id: '5' },
      ],
    }
  },
  methods: {
    customFilter (item, queryText, itemText) {
      const filterName = item.name.toLowerCase()
      const filterAbbr = item.abbr.toLowerCase()
      const filterId = item.id.toLowerCase()
      const searchText = queryText.toLowerCase()

      return 
      filterName.indexOf(searchText) > -1 ||
      filterAbbr.indexOf(searchText) > -1 ||
      filterId.indexOf(searchText) > -1
    },
  },
})