2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Files
vue-select/docs/guide/ajax.md
T

1.8 KiB

AJAX Remote Option Loading

The onSearch prop allows you to load options via ajax in a parent component when the search text is updated. It is invoked with two parameters, search & loading.

/**
* Accepts a callback function that will be run
* when the search text changes. The callback
* will be invoked with these parameters:
*
* @param {search}  String		Current search text
* @param {loading} Function	Toggle loading class
*/
onSearch: {
  type: Function,
  default: false
},

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.