Jeff Sagal
01ecee93d5
* remove onSearch callback prop * update ajax docs * docs formatting * remove onSearch callback prop
2.1 KiB
Loading Options with AJAX
The search event provides a hook to load options from a parent component
when the search text is updated. It is emitted with two parameters:
Search Event Parameters
search {String}The current search stringloading {Function}Accepts a boolean parameter to toggle the loading state
<v-select @search="fetchOptions" />
/**
* Triggered when the search text changes.
*
* @param search {String} Current search text
* @param loading {Function} Toggle loading class
*/
fetchOptions (search, loading) {
// ... do some asynchronous stuff!
},
The loading function accepts a boolean parameter that will be assigned
to the vue-select internal loading property. Call loading(true) to set the
loading property to true - toggling the loading spinner. After your
asynchronous operation completes, call loading(false) to toggle it off.
Disabling Filtering
When loading server side options, it can be useful to disable the
client side filtering. Use the filterable prop to disable filtering.
/**
* When true, existing options will be filtered
* by the search text. Should not be used in
* conjunction with taggable.
*
* @type {Boolean}
*/
filterable: {
type: Boolean,
default: true
},
Loading Spinner
Vue Select includes a default loading spinner that appears when the loading class is present. The
spinner slot allows you to implement your own spinner.
<div class="spinner" v-show="spinner">Loading...</div>
Library Agnostic
Since Vue.js does not ship with ajax functionality as part of the core library, it's up to you to process the ajax requests in your parent component.
I recommend using axios for creating your applications HTTP layer,
or fetch() for simple requests.
Example
The codepen example wraps up all the above concepts and searches GitHub repositories. It also uses scoped slots to add some custom templating.