Vue-select: How to start ajax on search:focus ?

[imaxwen]

By default the search event will triggered when the search input value changes, and the event trigger will pass the internal loading state handler loading as a parameter.

my select forms are always has a small list, if the search:focus event passes the loading and search parameter, I can manually finish this feature.

but that event passes nothing

so please help or is there another solution?

[akhoury]

workaround use ref to access the v-select component search and to call toggleLoading(true|false)

<template>
    <v-select ref="select" @search="onSearch" @search:focus="onSearch"  ... />
</template>
<script>
export default {
    methods: {
          onSearch: async function (query, loading) {
            search = search || this.$refs.select.search;
            loading = loading || this.$refs.select.toggleLoading;

            loading(true);
            await searchStuff(search);
            loading(false)
          }
    }
}
</script>

you can use this.$refs.select.toggleLoading(true);

[rspeed]

This can be closed.

[cotej]

Seems to be a decent workaround, I'll probably go with it myself. However I'm not sure this should be closed on that alone.

It would be nice if there were a way of accomplishing this with documented API features. Directly accessing $refs.select.search and $refs.select.toggleLoading feels like it could be brittle.

[sagalbot]

In v4 all events will receive the component VM as the only parameter. That + improved docs for events and methods should solve this.