Vue-multiselect: Default local options with AJAX

[vanpet]

I don't know how to implement the follwing functionality:

• when the component load, I want to fill the options from a local array that the user can select by clicking in the list.
• when the user starts to type in the search box, I want to replace the options with those returned by the AJAX server.

It this possible?

[mt89vein]

Yes, you can.

in data declare array options with local array and timer for debounce

data () {
    return {
        options: ['some', 'array'],
        debounceTimer: null
    }
}

then on @search-change event attach event listener, which will send ajax requests to server:
p.s. as an optimization you also need to add debounce, to prevent much count of requests on key pressing :)

asyncFind(query) {
    if (query.match(/^\s*$/)) {    // prevent white space requests
       return
    }
    this.isLoading = true   // use it to say to multiselect to show loading spinner
    clearTimeout(this.debounceTimer)   // clearing debounceTimer
    this.debounceTimer = setTimeout(() => {   // set timer 500 ms, if not reset with line above (by new search-change event), the function will be executes the ajax request to server
        axios.get(url, params) // axios -> http client for xmlhttprequests
                .then(response => { 
                    this.options= response.data  // setting from server options
                    this.isLoading = false  // say to multiselect to hide loading spinner
                })
    }, 500)
}

and v-bind:options="options" and @search-change="asyncFind" to vue-multiselect