Skip to content

Commit 6671b8e

Browse files
author
Jeff
committed
- complete docs overhaul
1 parent 7e859dc commit 6671b8e

File tree

12 files changed

+428
-153
lines changed

12 files changed

+428
-153
lines changed

‎docs/gitbook/Advanced/AJAX.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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.

‎docs/gitbook/Advanced/Templating.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#### Scoped Slot `option`
2+
3+
vue-select provides the scoped `option` slot in order to create custom dropdown templates.
4+
5+
```html
6+
<v-select :options="options" label="title">
7+
<template slot="option" slot-scope="option">
8+
<span :class="option.icon"></span>
9+
{{ option.title }}
10+
</template>
11+
</v-select>
12+
```
13+
14+
Using the `option` slot with `slot-scope="option"` gives the
15+
provides the current option variable to the template.
16+
17+
[](codepen://sagalbot/NXBwYG?height=500)

‎docs/gitbook/Advanced/Validation.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[](codepen://sagalbot/zZQJKW?height=600)

‎docs/gitbook/Advanced/Vuex.md

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
### Change Event <small>Vuex Compatibility</small>
2-
3-
`vue-select` provides a `change` event. This function is passed the currently selected value(s) as it's only parameter.
4-
5-
This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.
1+
### Using the `input` Event with Vuex
62

3+
`vue-select` emits the `input` event any time the internal `value` is changed.
4+
This is the same event that allow the for the `v-model` syntax. When using
5+
Vuex for state management, you can use the `input` event to dispatch an
6+
action, or trigger a mutation.
77

88
```html
9-
<v-select v-on:change="consoleCallback" :options="countries"></v-select>
10-
```
9+
<v-select
10+
@input="myAction"
11+
:options="$store.state.options"
12+
:value="$store.state.selected"
13+
></v-select>
14+
```
1115

12-
```js
13-
methods: {
14-
consoleCallback(val) {
15-
console.dir(JSON.stringify(val))
16-
},
17-
}
18-
```
16+
[](codepen://sagalbot/aJQJyp?height=500)

‎docs/gitbook/Ajax/Ajax.md

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +0,0 @@
1-
## AJAX Remote Option Loading
2-
3-
4-
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`.
5-
6-
#### onSearch Callback Parameters <small>search, loading</small>
7-
8-
`search` is a string containing the current search text. `loading` is a function that accepts a boolean value, and is used to toggle the 'loading' class on the top-level vue-select wrapper.
9-
10-
#### Loading Spinner
11-
12-
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.
13-
14-
<div id="spinner-example" :class="{loading:spinner}"><button class="btn btn-sm btn-default" @click="spinner = !spinner">Toggle Spinner</button>
15-
16-
<div class="spinner" v-show="spinner">Loading...</div>
17-
18-
#### Debounce Input
19-
20-
Vue Select also accepts a `debounce` prop that can be used to prevent `onSearch` from being called until input has completed.
21-
22-
#### Library Agnostic
23-
24-
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.
25-
26-
27-
#### Example <small>GitHub API</small>
28-
29-
In this example, [Vue Resource](https://github.com/vuejs/vue-resource) is used to access the [GitHub API](https://developer.github.com/v3/).
30-
31-
<git-hub-search-basic></git-hub-search-basic><ajax-example></ajax-example></div>

‎docs/gitbook/Ajax/AjaxExample.md

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎docs/gitbook/Ajax/AjaxProps.md

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +0,0 @@
1-
```js
2-
/**
3-
* Accept a callback function that will be run
4-
* when the search text changes. The callback
5-
* will be invoked with these parameters:
6-
7-
* @param {search} String Current search text
8-
* @param {loading} Function(bool) Toggle loading class
9-
*/
10-
onSearch: {
11-
type: Function,
12-
default: false
13-
},
14-
15-
/**
16-
* Milliseconds to wait before invoking this.onSearch().
17-
* Used to prevent sending an AJAX request until input
18-
* has completed.
19-
*/
20-
debounce: {
21-
type: Number,
22-
default: 0
23-
}
24-
```

0 commit comments

Comments
 (0)