2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-10 07:52:23 +03:00

Merge branch 'ft/vuepress-no-cli' into release/v3.0

# Conflicts:
#	src/mixins/typeAheadPointer.js
This commit is contained in:
Jeff
2019-02-16 12:36:38 -08:00
56 changed files with 5051 additions and 1959 deletions
+60
View File
@@ -0,0 +1,60 @@
## AJAX Remote Option Loading
<CodePen url="POMeOX" height="400"/>
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`.
```js
/**
* 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.
```js
/**
* 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.
```html
<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](https://github.com/axios/axios) for creating your applications HTTP layer,
or [`fetch()`](https://github.com/github/fetch) for simple requests.
+4
View File
@@ -0,0 +1,4 @@
### Codepen Collection
I've put together a collection of examples, including all the examples
from this documentation site on [Codepen](https://codepen.io/collection/nrkgxV/#).
View File
+17
View File
@@ -0,0 +1,17 @@
#### Scoped Slot `option`
vue-select provides the scoped `option` slot in order to create custom dropdown templates.
```html
<v-select :options="options" label="title">
<template slot="option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
```
Using the `option` slot with `slot-scope="option"` gives the
provides the current option variable to the template.
<CodePen url="NXBwYG" height="500"/>
+16
View File
@@ -0,0 +1,16 @@
### Using the `input` Event with Vuex
`vue-select` emits the `input` event any time the internal `value` is changed.
This is the same event that allow the for the `v-model` syntax. When using
Vuex for state management, you can use the `input` event to dispatch an
action, or trigger a mutation.
```html
<v-select
@input="myAction"
:options="$store.state.options"
:value="$store.state.selected"
></v-select>
```
<CodePen url="aJQJyp" height="350"/>