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

Question

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?

Answer 1

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.

Answer 2

you can use no-data-text property on v-autocomplete

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