Vuetify Autocomplete со слотами, не предлагать автозаполнение при наборе текста - PullRequest
Новая
       14

Vuetify Autocomplete со слотами, не предлагать автозаполнение при наборе текста

1 голос
/ 17 октября 2019

Я пытаюсь создать небольшой инструмент, в котором кто-то будет заполнять некоторые данные, это будет либо имя, либо идентификатор, а в поле будет отображаться список автозаполнения. (Конечный результат будет содержать более 100 результатов, необходима функция автозаполнения.)

Я пытался использовать автозаполнение Vuetify, но я изо всех сил стараюсь, чтобы он правильно фильтровал. Я использую следующий код, предоставленный Vuetify, без кнопки «Редактировать» (https://vuetifyjs.com/en/components/autocompletes#custom-filter-on-autocomplete)), и мне удалось добавить идентификатор и показать его в результатах с выделенным слотом.

Однако, если вы вводите что-то в поле ввода, оно вообще не показывает никаких предложений.

Я смотрел на это несколько часов и, должно быть, что-то упустил. Я опустошил слоты, проверилметод, изменил || и вернулся к ним. В данный момент я понятия не имею.

Кодовая скрипка

HTML: 

<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>

Vue: 

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
    },
  },
})

1 Ответ

1 голос
/ 17 октября 2019

Просто используйте одну строку для последних return, и это работает 

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

или 

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