mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-26 04:34:04 +03:00
Code Activity

Updates

Browse Source
This commit is contained in:
Jeff
2018-01-15 15:29:21 -08:00
parent cca0f755da
commit 0c0fa25e2b
68 changed files with 7213 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/Advanced/AJAX.md
+60
View File
@@ -0,0 +1,60 @@
## AJAX Remote Option Loading
[](codepen://sagalbot/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.
docs/Advanced/Ajax.html
+508
View File
@@ -0,0 +1,508 @@
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>AJAX · vue-select</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../styles/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="../Examples.html" />
<link rel="prev" href="Vuex.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" >
<span>
Getting Started
</span>
</li>
<li class="chapter " data-level="1.3" data-path="../Install.html">
<a href="../Install.html">
Installation
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../Basics/Options.html">
<a href="../Basics/Options.html">
Dropdown Options
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#labels">
Option Labels
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#null">
Null Options
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#values">
Selecting Values
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#single">
Single
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#multiple">
Multiple
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#tagging">
Tagging
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../Basics/Localization.html">
<a href="../Basics/Localization.html">
Localization
</a>
</li>
<li class="chapter " data-level="1.7" >
<span>
Digging Deeper
</span>
</li>
<li class="chapter " data-level="1.8" data-path="Templating.html">
<a href="Templating.html">
Templating
</a>
</li>
<li class="chapter " data-level="1.9" data-path="Vuex.html">
<a href="Vuex.html">
Vuex
</a>
</li>
<li class="chapter active" data-level="1.10" data-path="Ajax.html">
<a href="Ajax.html">
AJAX
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../Examples.html">
<a href="../Examples.html">
Examples
</a>
</li>
<li class="chapter " data-level="1.12" >
<span>
API
</span>
</li>
<li class="chapter " data-level="1.13" data-path="../Api/Props.html">
<a href="../Api/Props.html">
Props
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >AJAX</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h2 id="ajax-remote-option-loading">AJAX Remote Option Loading</h2>
<p></p><p data-height="400" data-theme-id="32252" data-slug-hash="POMeOX" data-default-tab="result" data-user="sagalbot" class="codepen">See the Pen <a href="http://codepen.io/sagalbot/pen/POMeOX/" target="_blank"></a> by sagalbot (<a href="http://codepen.io/sagalbot" target="_blank">@sagalbot</a>) on <a href="http://codepen.io" target="_blank">CodePen</a>.</p><p></p>
<p>The <code>onSearch</code> prop allows you to load options via ajax in a parent component
when the search text is updated. It is invoked with two parameters, <code>search</code> &amp; <code>loading</code>.</p>
<pre><code class="lang-js"><span class="hljs-comment">/**
* 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
*/</span>
onSearch: {
type: <span class="hljs-built_in">Function</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
</code></pre>
<p>The <code>loading</code> function accepts a boolean parameter that will be assigned
to the vue-select internal <code>loading</code> property. Call <code>loading(true)</code> to set the
<code>loading</code> property to <code>true</code> - toggling the loading spinner. After your
asynchronous operation completes, call <code>loading(false)</code> to toggle it off. </p>
<h4 id="disabling-filtering">Disabling Filtering</h4>
<p>When loading server side options, it can be useful to disable the
client side filtering. Use the <code>filterable</code> prop to disable filtering.</p>
<pre><code class="lang-js"><span class="hljs-comment">/**
* When true, existing options will be filtered
* by the search text. Should not be used in
* conjunction with taggable.
*
* @type {Boolean}
*/</span>
filterable: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">true</span>
},
</code></pre>
<h4 id="loading-spinner">Loading Spinner</h4>
<p>Vue Select includes a default loading spinner that appears when the loading class is present. The <code>spinner</code> slot allows you to implement your own spinner.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;spinner&quot;</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;spinner&quot;</span>&gt;</span>Loading...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<h4 id="library-agnostic">Library Agnostic</h4>
<p>Since Vue.js does not ship with ajax functionality as part of the core library, it&apos;s up to you to process the ajax requests in your parent component.</p>
<p>I recommend using <a href="https://github.com/axios/axios" target="_blank">axios</a> for creating your applications HTTP layer,
or <a href="https://github.com/github/fetch" target="_blank"><code>fetch()</code></a> for simple requests.</p>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="Vuex.html" class="navigation navigation-prev " aria-label="Previous page: Vuex">
<i class="fa fa-angle-left"></i>
</a>
<a href="../Examples.html" class="navigation navigation-next " aria-label="Next page: Examples">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"AJAX","level":"1.10","depth":1,"next":{"title":"Examples","level":"1.11","depth":1,"path":"Examples.md","ref":"Examples.md","articles":[]},"previous":{"title":"Vuex","level":"1.9","depth":1,"path":"Advanced/Vuex.md","ref":"Advanced/Vuex.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","-fontsettings","codepen","include-csv"],"root":"./docs/gitbook","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"include-csv":{},"github":{"url":"https://github.com/sagalbot/vue-select/"},"search":{},"codepen":{"theme":32252},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/sagalbot/vue-select/edit/gitbook/docs/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"vue-select","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":">3.0.0"},"file":{"path":"Advanced/Ajax.md","mtime":"2018-01-15T07:16:15.451Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-01-15T23:01:42.518Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-codepen/embed-codepen.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
</body>
</html>
docs/Advanced/Mixins.md
View File
docs/Advanced/Templating.html
+470
View File
@@ -0,0 +1,470 @@
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Templating · vue-select</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../styles/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="Vuex.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" >
<span>
Getting Started
</span>
</li>
<li class="chapter " data-level="1.3" data-path="../Install.html">
<a href="../Install.html">
Installation
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../Basics/Options.html">
<a href="../Basics/Options.html">
Dropdown Options
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#labels">
Option Labels
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#null">
Null Options
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#values">
Selecting Values
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#single">
Single
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#multiple">
Multiple
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#tagging">
Tagging
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../Basics/Localization.html">
<a href="../Basics/Localization.html">
Localization
</a>
</li>
<li class="chapter " data-level="1.7" >
<span>
Digging Deeper
</span>
</li>
<li class="chapter active" data-level="1.8" data-path="Templating.html">
<a href="Templating.html">
Templating
</a>
</li>
<li class="chapter " data-level="1.9" data-path="Vuex.html">
<a href="Vuex.html">
Vuex
</a>
</li>
<li class="chapter " data-level="1.10" data-path="Ajax.html">
<a href="Ajax.html">
AJAX
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../Examples.html">
<a href="../Examples.html">
Examples
</a>
</li>
<li class="chapter " data-level="1.12" >
<span>
API
</span>
</li>
<li class="chapter " data-level="1.13" data-path="../Api/Props.html">
<a href="../Api/Props.html">
Props
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Templating</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h4 id="scoped-slot-option">Scoped Slot <code>option</code></h4>
<p>vue-select provides the scoped <code>option</code> slot in order to create custom dropdown templates.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">v-select</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;title&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;option&quot;</span> <span class="hljs-attr">slot-scope</span>=<span class="hljs-string">&quot;option&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">&quot;option.icon&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
{{ option.title }}
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">v-select</span>&gt;</span>
</code></pre>
<p>Using the <code>option</code> slot with <code>slot-scope=&quot;option&quot;</code> gives the
provides the current option variable to the template.</p>
<p></p><p data-height="500" data-theme-id="32252" data-slug-hash="NXBwYG" data-default-tab="result" data-user="sagalbot" class="codepen">See the Pen <a href="http://codepen.io/sagalbot/pen/NXBwYG/" target="_blank"></a> by sagalbot (<a href="http://codepen.io/sagalbot" target="_blank">@sagalbot</a>) on <a href="http://codepen.io" target="_blank">CodePen</a>.</p><p></p>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="Vuex.html" class="navigation navigation-next navigation-unique" aria-label="Next page: Vuex">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Templating","level":"1.8","depth":1,"next":{"title":"Vuex","level":"1.9","depth":1,"path":"Advanced/Vuex.md","ref":"Advanced/Vuex.md","articles":[]},"previous":{"title":"Digging Deeper","level":"1.7","depth":1,"ref":"","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","-fontsettings","codepen","include-csv"],"root":"./docs/gitbook","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"include-csv":{},"github":{"url":"https://github.com/sagalbot/vue-select/"},"search":{},"codepen":{"theme":32252},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/sagalbot/vue-select/edit/gitbook/docs/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"vue-select","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":">3.0.0"},"file":{"path":"Advanced/Templating.md","mtime":"2018-01-15T05:26:21.549Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-01-15T23:01:42.518Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-codepen/embed-codepen.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
</body>
</html>
docs/Advanced/Validation.md
+1
View File
@@ -0,0 +1 @@
[](codepen://sagalbot/zZQJKW?height=600)
docs/Advanced/Vuex.html
+476
View File
@@ -0,0 +1,476 @@
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Vuex · vue-select</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../styles/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="Ajax.html" />
<link rel="prev" href="Templating.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" >
<span>
Getting Started
</span>
</li>
<li class="chapter " data-level="1.3" data-path="../Install.html">
<a href="../Install.html">
Installation
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../Basics/Options.html">
<a href="../Basics/Options.html">
Dropdown Options
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#labels">
Option Labels
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#null">
Null Options
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#values">
Selecting Values
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#single">
Single
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#multiple">
Multiple
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#tagging">
Tagging
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../Basics/Localization.html">
<a href="../Basics/Localization.html">
Localization
</a>
</li>
<li class="chapter " data-level="1.7" >
<span>
Digging Deeper
</span>
</li>
<li class="chapter " data-level="1.8" data-path="Templating.html">
<a href="Templating.html">
Templating
</a>
</li>
<li class="chapter active" data-level="1.9" data-path="Vuex.html">
<a href="Vuex.html">
Vuex
</a>
</li>
<li class="chapter " data-level="1.10" data-path="Ajax.html">
<a href="Ajax.html">
AJAX
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../Examples.html">
<a href="../Examples.html">
Examples
</a>
</li>
<li class="chapter " data-level="1.12" >
<span>
API
</span>
</li>
<li class="chapter " data-level="1.13" data-path="../Api/Props.html">
<a href="../Api/Props.html">
Props
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Vuex</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h3 id="using-the-input-event-with-vuex">Using the <code>input</code> Event with Vuex</h3>
<p><code>vue-select</code> emits the <code>input</code> event any time the internal <code>value</code> is changed.
This is the same event that allow the for the <code>v-model</code> syntax. When using
Vuex for state management, you can use the <code>input</code> event to dispatch an
action, or trigger a mutation.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">v-select</span>
@<span class="hljs-attr">input</span>=<span class="hljs-string">&quot;myAction&quot;</span>
<span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;$store.state.options&quot;</span>
<span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;$store.state.selected&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">v-select</span>&gt;</span>
</code></pre>
<p></p><p data-height="500" data-theme-id="32252" data-slug-hash="aJQJyp" data-default-tab="result" data-user="sagalbot" class="codepen">See the Pen <a href="http://codepen.io/sagalbot/pen/aJQJyp/" target="_blank"></a> by sagalbot (<a href="http://codepen.io/sagalbot" target="_blank">@sagalbot</a>) on <a href="http://codepen.io" target="_blank">CodePen</a>.</p><p></p>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="Templating.html" class="navigation navigation-prev " aria-label="Previous page: Templating">
<i class="fa fa-angle-left"></i>
</a>
<a href="Ajax.html" class="navigation navigation-next " aria-label="Next page: AJAX">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Vuex","level":"1.9","depth":1,"next":{"title":"AJAX","level":"1.10","depth":1,"path":"Advanced/Ajax.md","ref":"Advanced/Ajax.md","articles":[]},"previous":{"title":"Templating","level":"1.8","depth":1,"path":"Advanced/Templating.md","ref":"Advanced/Templating.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","-fontsettings","codepen","include-csv"],"root":"./docs/gitbook","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"include-csv":{},"github":{"url":"https://github.com/sagalbot/vue-select/"},"search":{},"codepen":{"theme":32252},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/sagalbot/vue-select/edit/gitbook/docs/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"vue-select","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":">3.0.0"},"file":{"path":"Advanced/Vuex.md","mtime":"2018-01-15T06:19:44.869Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-01-15T23:01:42.518Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-codepen/embed-codepen.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
</body>
</html>