|
| 1 | +## AJAX Remote Option Loading |
| 2 | + |
| 3 | +[](codepen://sagalbot/POMeOX?height=400) |
| 4 | + |
| 5 | +The `onSearch` prop allows you to load options via ajax in a parent component |
| 6 | +when the search text is updated. It is invoked with two parameters, `search` & `loading`. |
| 7 | + |
| 8 | +```js |
| 9 | +/** |
| 10 | +* Accepts a callback function that will be run |
| 11 | +* when the search text changes. The callback |
| 12 | +* will be invoked with these parameters: |
| 13 | +* |
| 14 | +* @param {search} String Current search text |
| 15 | +* @param {loading} Function Toggle loading class |
| 16 | +*/ |
| 17 | +onSearch: { |
| 18 | + type: Function, |
| 19 | + default: false |
| 20 | +}, |
| 21 | +``` |
| 22 | + |
| 23 | +The `loading` function accepts a boolean parameter that will be assigned |
| 24 | +to the vue-select internal `loading` property. Call `loading(true)` to set the |
| 25 | +`loading` property to `true` - toggling the loading spinner. After your |
| 26 | +asynchronous operation completes, call `loading(false)` to toggle it off. |
| 27 | + |
| 28 | +#### Disabling Filtering |
| 29 | + |
| 30 | +When loading server side options, it can be useful to disable the |
| 31 | +client side filtering. Use the `filterable` prop to disable filtering. |
| 32 | + |
| 33 | +```js |
| 34 | +/** |
| 35 | + * When true, existing options will be filtered |
| 36 | + * by the search text. Should not be used in |
| 37 | + * conjunction with taggable. |
| 38 | + * |
| 39 | + * @type {Boolean} |
| 40 | + */ |
| 41 | +filterable: { |
| 42 | + type: Boolean, |
| 43 | + default: true |
| 44 | +}, |
| 45 | +``` |
| 46 | + |
| 47 | +#### Loading Spinner |
| 48 | + |
| 49 | +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. |
| 50 | + |
| 51 | +```html |
| 52 | +<div class="spinner" v-show="spinner">Loading...</div> |
| 53 | +``` |
| 54 | + |
| 55 | +#### Library Agnostic |
| 56 | + |
| 57 | +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. |
| 58 | + |
| 59 | +I recommend using [axios](https://github.com/axios/axios) for creating your applications HTTP layer, |
| 60 | +or [`fetch()`](https://github.com/github/fetch) for simple requests. |
0 commit comments