Search code examples
javascriptvue.jsv-autocomplete

Is there v-autocomplete "no data filtred" callback in vuetify?

Is there any way to catch event when v-autocomplete from vuetify.js filter shows "no data available"? I cant find this event here https://vuetifyjs.com/en/api/v-autocomplete/#events May bee there is some workaround? May bee I can get filtered result and check it on NULL?

Solution

  • You can use @update:search-input event which is emitted when user typing in v-autocomplete. Then you can pass it a simple function which search the word over the list:

    <v-autocomplete
    v-model="values"
    :items="items"
    outlined
    dense
    chips
    small-chips
    label="Outlined"
    multiple
    @update:search-input="handleChange"
></v-autocomplete>

    handleChange method:

    methods: {
    handleChange(searchWord) {
      if (this.items.filter(value => value.startsWith(searchWord)).length === 0) {
        // vuetify shows 'no data available'
        console.log("no data available")
      }
    }
}

    I cannot find any way to get the filtered list in vuetify. So it's not the best way because you should write the filter function on your own. In addition you can visit this codepen which has all codes together.