# _development_cache

id: content/contributors.md
checksum: 3e1e65f90cd6246895e340862c408e2c
parsedContent:
{"id":"content/contributors.md","path":"/contributors","title":"Contributors","description":"Vue Select is supported by a community of awesome contributors! Without their contributions,\nthe package would not be what it is today.","body":{"type":"minimal","value":[["h1",{"id":"contributors"},"Contributors"],["p",{},"Vue Select is supported by a community of awesome contributors! Without their contributions,\nthe package would not be what it is today."],["contributors",{}]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"stem":"contributors","extension":"md","meta":{"sidebarDepth":0},"seo":{"title":"Contributors","description":"Vue Select is supported by a community of awesome contributors! Without their contributions,\nthe package would not be what it is today."}}


id: content/index.md
checksum: 4e620724dc61e8ba7a301f3bd21aa5db
parsedContent:
{"id":"content/index.md","path":"/","title":"Vue Select","description":"Everything you wish the HTML select element could do, shipped as a lightweight, accessible and extendable Vue component.","body":{"type":"minimal","value":[["lead",{},["p",{},"Vue Select is a feature rich combobox component. You might know it as a dropdown or\ntypeahead select. They're a staple on the web, and they're notoriously tough to get right!"]],["p",{},"Vue Select provides a default template that fits most use cases. The component is designed\nto be as lightweight as possible, while maintaining high standards for accessibility, developer\nexperience, and customization."],["quick-links",{},["quick-link",{"href":"/guide/install","title":"Installation"},["p",{},"Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!"],["template",{"v-slot:icon":""},["svg",{"dataName":"arrow-down-tray","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","fill":"currentColor","className":["w-6","h-6"]},["path",{"fillRule":"evenodd","d":"M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z","clipRule":"evenodd"}]]]],["quick-link",{"href":"/","title":"Options and Selections"},["p",{},"You'll need to register some options so your users can select them."],["template",{"v-slot:icon":""},["svg",{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":"1.5","stroke":"currentColor","className":["w-6","h-6"]},["path",{"strokeLineCap":"round","strokeLineJoin":"round","d":"M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"}]]]],["quick-link",{"href":"/","title":"Customizing"},["p",{},"Vue Select is plug-and-play by design, but you can always customize the look and feel."],["template",{"v-slot:icon":""},["svg",{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":"1.5","stroke":"currentColor","className":["w-6","h-6"]},["path",{"strokeLineCap":"round","strokeLineJoin":"round","d":"M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"}]]]],["quick-link",{"href":"/","title":"Premium Resources","icon":"theming"},["p",{},"Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option\nloading and more."],["template",{"v-slot:icon":""},["svg",{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":"1.5","stroke":"currentColor","className":["w-6","h-6"]},["path",{"strokeLineCap":"round","strokeLineJoin":"round","d":"M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"}]]]]],["h2",{"id":"features"},"Features"],["ul",{},["li",{},"Tagging"],["li",{},"Filtering / Searching"],["li",{},"Vuex Support"],["li",{},"AJAX Support"],["li",{},"SSR Support"],["li",{},"Accessible"],["li",{},"~20kb Total / ~5kb CSS / ~15kb JS"],["li",{},"Select Single/Multiple Options"],["li",{},"Customizable with slots and SCSS variables"],["li",{},"Zero dependencies"]],["h2",{"id":"resources"},"Resources"],["ul",{},["li",{},["strong",{},["a",{"href":"https://github.com/sagalbot/vue-select","rel":["nofollow"]},"GitHub"]]],["li",{},["strong",{},["a",{"href":"http://codepen.io/sagalbot/pen/NpwrQO","rel":["nofollow"]},"CodePen Template"]]]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"features","depth":2,"text":"Features"},{"id":"resources","depth":2,"text":"Resources"}]}},"stem":"index","extension":"md","meta":{"hero":true,"hideToc":true,"section":"Introduction"},"seo":{"title":"Vue Select","description":"Everything you wish the HTML select element could do, shipped as a lightweight, accessible and extendable Vue component."}}


id: content/sponsors.md
checksum: 049136ef08f37c248236f89d8a027e5d
parsedContent:
{"id":"content/sponsors.md","path":"/sponsors","title":"Sponsors","description":"","body":{"type":"minimal","value":[["sponsor-me",{},["h2",{"id":"sponsors"},"Sponsors"],["sponsors",{}]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sponsors","depth":2,"text":"Sponsors"}]}},"stem":"sponsors","extension":"md","meta":{"sidebarDepth":0},"seo":{"title":"Sponsors","description":""}}


id: content/sandbox.md
checksum: ee0f7050ba22b1b3925f2af6d230b2b7
parsedContent:
{"id":"content/sandbox.md","path":"/sandbox","title":"Sandbox","description":"","body":{"type":"minimal","value":[],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"stem":"sandbox","extension":"md","meta":{"sidebar":false,"editLink":false,"layout":"Sandbox"},"seo":{"title":"Sandbox","description":""}}


id: content/validation.md
checksum: 1d5de4e3bb2e0b3c4527ead9322d4d0b
parsedContent:
{"id":"content/validation.md","path":"/validation","title":"Validation","description":"","body":{"type":"minimal","value":[["code-pen",{"url":"zZQJKW","height":60}]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"stem":"validation","extension":"md","meta":{},"seo":{"title":"Validation","description":""}}


id: content/api/events.md
checksum: 9f37cb0a4f5dc7a8a6d6139f4193179f
parsedContent:
{"id":"content/api/events.md","path":"/api/events","title":"Events","description":"","body":{"type":"minimal","value":[["h2",{"id":"input"},["code",{},"input"]],["p",{},"Triggered when the selected value changes. Used internally for ",["code",{},"v-model"],"."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * @param {Object|String} val - selected option.\n */\nthis.$emit(\"input\", val);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Object|String}"],["span",{"class":"sWKip"}," val"],["span",{"class":"sKA9v"}," - selected option.\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":4},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"input\""],["span",{"class":"sWKip"},", val);\n"]]]],["h2",{"id":"open"},["code",{},"open"]],["p",{},"Triggered when the dropdown is open."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"open\");\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"open\""],["span",{"class":"sWKip"},");\n"]]]],["h2",{"id":"close"},["code",{},"close"]],["p",{},"Triggered when the dropdown is closed."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"close\");\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"close\""],["span",{"class":"sWKip"},");\n"]]]],["h2",{"id":"optionselecting"},["code",{},"option:selecting"]," ",["badge",{"text":"v3.11.0+"}]],["p",{},"Triggered after an option has been selected, ",["strong",{},"before"]," updating internal state."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"option:selecting\", selectedOption);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"option:selecting\""],["span",{"class":"sWKip"},", selectedOption);\n"]]]],["h2",{"id":"optionselected"},["code",{},"option:selected"]," ",["badge",{"text":"v3.11.0+"}]],["p",{},"Triggered when an option has been selected, ",["strong",{},"after"]," updating internal state."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"option:selected\", selectedOption);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"option:selected\""],["span",{"class":"sWKip"},", selectedOption);\n"]]]],["h2",{"id":"optiondeselecting"},["code",{},"option:deselecting"]," ",["badge",{"text":"v3.11.0+"}]],["p",{},"Triggered when an option has been deselected, ",["strong",{},"before"]," updating internal state."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"option:deselecting\", selectedOption);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"option:deselecting\""],["span",{"class":"sWKip"},", selectedOption);\n"]]]],["h2",{"id":"optiondeselected"},["code",{},"option:deselected"]," ",["badge",{"text":"v3.11.0+"}]],["p",{},"Triggered when an option has been deselected, ",["strong",{},"after"]," updating internal state."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"option:deselected\", deselectedOption);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"option:deselected\""],["span",{"class":"sWKip"},", deselectedOption);\n"]]]],["h2",{"id":"optioncreated"},["code",{},"option:created"]],["p",{},"Triggered when ",["code",{},"taggable"]," is ",["code",{},"true"]," and a new option has been created."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * @param {Object} newOption - created option\n */\nthis.$emit(\"option:created\", newOption);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Object}"],["span",{"class":"sWKip"}," newOption"],["span",{"class":"sKA9v"}," - created option\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":4},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"option:created\""],["span",{"class":"sWKip"},", newOption);\n"]]]],["h2",{"id":"search"},["code",{},"search"]],["p",{},"Anytime the search string changes, emit the\n'search' event. The event is passed with two\nparameters: the search string, and a function\nthat accepts a boolean parameter to toggle the\nloading state."],["p",{},"See the ",["a",{"href":"/guide/ajax.html#loading-options-with-ajax"},"AJAX Guide"],"\nfor a complete example."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * @param {String} searchString - the search string\n * @param {Function} toggleLoading - function to toggle loading state, accepts true or false boolean\n */\nthis.$emit('search', this.search, this.toggleLoading);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {String}"],["span",{"class":"sWKip"}," searchString"],["span",{"class":"sKA9v"}," - the search string\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Function}"],["span",{"class":"sWKip"}," toggleLoading"],["span",{"class":"sKA9v"}," - function to toggle loading state, accepts true or false boolean\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":5},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'search'"],["span",{"class":"sWKip"},", "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".search, "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".toggleLoading);\n"]]]],["pre",{"className":"language-vue shiki shiki-themes github-light github-dark","code":"<!-- example usage -->\n<v-select\n    @search=\"(search, loading) => { \n      loading(true)\n      fetchOptions(search).then(() => loading(false))\n    }\"\n/>\n","language":"vue","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- example usage -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"    @"],["span",{"class":"sDUX4"},"search"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\""],["span",{"class":"sWKip"},"("],["span",{"class":"sf26o"},"search"],["span",{"class":"sWKip"},", "],["span",{"class":"sf26o"},"loading"],["span",{"class":"sWKip"},") "],["span",{"class":"scLti"},"=>"],["span",{"class":"sWKip"}," { \n"]],["span",{"class":"line","line":4},["span",{"class":"sDUX4"},"      loading"],["span",{"class":"sWKip"},"("],["span",{"class":"swLay"},"true"],["span",{"class":"sWKip"},")\n"]],["span",{"class":"line","line":5},["span",{"class":"sDUX4"},"      fetchOptions"],["span",{"class":"sWKip"},"(search)."],["span",{"class":"sDUX4"},"then"],["span",{"class":"sWKip"},"(() "],["span",{"class":"scLti"},"=>"],["span",{"class":"sDUX4"}," loading"],["span",{"class":"sWKip"},"("],["span",{"class":"swLay"},"false"],["span",{"class":"sWKip"},"))\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"    }"],["span",{"class":"sHTXl"},"\"\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"/>\n"]]]],["h2",{"id":"searchblur"},["code",{},"search:blur"]],["p",{},"Triggered when the text input loses focus. The dropdown will close immediately before this\nevent is triggered."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"search:blur\");\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"search:blur\""],["span",{"class":"sWKip"},");\n"]]]],["h2",{"id":"searchfocus"},["code",{},"search:focus"]],["p",{},"Triggered when the text input gains focus. The dropdown will open immediately before this\nevent is triggered."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"this.$emit(\"search:focus\");\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"\"search:focus\""],["span",{"class":"sWKip"},");\n"]]]],["h2",{"id":"search-1"},["code",{},"search"]],["p",{},"Triggered when the search text changes."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * Anytime the search string changes, emit the\n * 'search' event. The event is passed with two\n * parameters: the search string, and a function\n * that accepts a boolean parameter to toggle the\n * loading state.\n *\n * @emits search\n */\nthis.$emit('search', newSearchString, toggleLoading);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * Anytime the search string changes, emit the\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," * 'search' event. The event is passed with two\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"}," * parameters: the search string, and a function\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"}," * that accepts a boolean parameter to toggle the\n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"}," * loading state.\n"]],["span",{"class":"line","line":7},["span",{"class":"sKA9v"}," *\n"]],["span",{"class":"line","line":8},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@emits"],["span",{"class":"sDUX4"}," search\n"]],["span",{"class":"line","line":9},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":10},["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'search'"],["span",{"class":"sWKip"},", newSearchString, toggleLoading);\n"]]]],["style",{},"html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"input","depth":2,"text":"input"},{"id":"open","depth":2,"text":"open"},{"id":"close","depth":2,"text":"close"},{"id":"optionselecting","depth":2,"text":"option:selecting "},{"id":"optionselected","depth":2,"text":"option:selected "},{"id":"optiondeselecting","depth":2,"text":"option:deselecting "},{"id":"optiondeselected","depth":2,"text":"option:deselected "},{"id":"optioncreated","depth":2,"text":"option:created"},{"id":"search","depth":2,"text":"search"},{"id":"searchblur","depth":2,"text":"search:blur"},{"id":"searchfocus","depth":2,"text":"search:focus"},{"id":"search-1","depth":2,"text":"search"}]}},"stem":"api/events","extension":"md","meta":{},"seo":{"title":"Events","description":""}}


id: content/api/props.md
checksum: 87bd849b5221cd34152d7297d8cf0753
parsedContent:
{"id":"content/api/props.md","path":"/api/props","title":"Props","description":"","body":{"type":"minimal","value":[["h2",{"id":"appendtobody"},"appendToBody ",["badge",{"text":"v3.7.0+"}]],["p",{},"Append the dropdown element to the end of the body\nand size/position it dynamically. Use it if you have\noverflow or z-index issues."],["p",{},"See ",["a",{"href":"../guide/positioning"},"Dropdown Position"]," for more details."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"appendToBody: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"appendToBody"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"autocomplete"},"autocomplete"],["p",{},"The value provided here will be bound to the ",["a",{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete","rel":["nofollow"]},"autocomplete\nHTML attribute"],"\non the search input. Defaults to ",["code",{},"off"],"."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"autocomplete: {\n    type: String,\n    default: 'off'\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"autocomplete"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'off'\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"autoscroll"},"autoscroll ",["badge",{"text":"v3.10.0+"}]],["p",{},"When true, the dropdown will automatically scroll to ensure\nthat the option highlighted is fully within the dropdown viewport\nwhen navigating with keyboard arrows."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"autoscroll: {\n  type: Boolean,\n  default: true\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"autoscroll"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"}\n"]]]],["h2",{"id":"calculateposition"},"calculatePosition ",["badge",{"text":"v3.7.0+"}]],["p",{},"When ",["code",{},"appendToBody"]," is true, this function is responsible for positioning the drop down list."],["p",{},"If a function is returned from ",["code",{},"calculatePosition"],", it will be called when the drop down list\nis removed from the DOM. This allows for any garbage collection you may need to do."],["p",{},"See ",["a",{"href":"../guide/positioning"},"Dropdown Position"]," for more details."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"calculatePosition: {\n    type: Function,\n    /**\n     * @param dropdownList {HTMLUListElement}\n     * @param component {Vue} current instance of vue select\n     * @param width {string} calculated width in pixels of the dropdown menu\n     * @param top {string} absolute position top value in pixels relative to the document\n     * @param left {string} absolute position left value in pixels relative to the document\n     * @return {function|void}\n     */\n    default(dropdownList, component, {width, top, left}) {\n      dropdownList.style.top = top;\n      dropdownList.style.left = left;\n      dropdownList.style.width = width;\n    }\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"calculatePosition"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"},"    /**\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"     * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," dropdownList"],["span",{"class":"sKA9v"}," {HTMLUListElement}\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"},"     * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," component"],["span",{"class":"sKA9v"}," {Vue} current instance of vue select\n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"},"     * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," width"],["span",{"class":"sKA9v"}," {string} calculated width in pixels of the dropdown menu\n"]],["span",{"class":"line","line":7},["span",{"class":"sKA9v"},"     * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," top"],["span",{"class":"sKA9v"}," {string} absolute position top value in pixels relative to the document\n"]],["span",{"class":"line","line":8},["span",{"class":"sKA9v"},"     * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," left"],["span",{"class":"sKA9v"}," {string} absolute position left value in pixels relative to the document\n"]],["span",{"class":"line","line":9},["span",{"class":"sKA9v"},"     * "],["span",{"class":"scLti"},"@return"],["span",{"class":"sDUX4"}," {function|void}\n"]],["span",{"class":"line","line":10},["span",{"class":"sKA9v"},"     */\n"]],["span",{"class":"line","line":11},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},"(dropdownList, component, {width, top, left}) {\n"]],["span",{"class":"line","line":12},["span",{"class":"sWKip"},"      dropdownList.style.top "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," top;\n"]],["span",{"class":"line","line":13},["span",{"class":"sWKip"},"      dropdownList.style.left "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," left;\n"]],["span",{"class":"line","line":14},["span",{"class":"sWKip"},"      dropdownList.style.width "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," width;\n"]],["span",{"class":"line","line":15},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":16},["span",{"class":"sWKip"},"}\n"]]]],["h2",{"id":"clearable"},"clearable"],["p",{},"Can the user clear the selected property?"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"clearable: {\n    type: Boolean,\n    default: true\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"clearable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"clearsearchonblur"},"clearSearchOnBlur"],["p",{},"Enables/disables clearing the search text when the search input is blurred."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"clearSearchOnBlur: {\n    type: Function,\n    default: function ({ clearSearchOnSelect, multiple }) {\n      return clearSearchOnSelect && !multiple\n    }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"clearSearchOnBlur"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"scLti"},"function"],["span",{"class":"sWKip"}," ({ "],["span",{"class":"sf26o"},"clearSearchOnSelect"],["span",{"class":"sWKip"},", "],["span",{"class":"sf26o"},"multiple"],["span",{"class":"sWKip"}," }) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"      return"],["span",{"class":"sWKip"}," clearSearchOnSelect "],["span",{"class":"scLti"},"&&"],["span",{"class":"scLti"}," !"],["span",{"class":"sWKip"},"multiple\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"clearsearchonselect"},"clearSearchOnSelect"],["p",{},"Enables/disables clearing the search text when an option is selected."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"clearSearchOnSelect: {\n    type: Boolean,\n    default: true\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"clearSearchOnSelect"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"closeonselect"},"closeOnSelect"],["p",{},"Close a dropdown when an option is chosen. Set to false to keep the dropdown\nopen (useful when combined with multi-select, for example)"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"closeOnSelect: {\n    type: Boolean,\n    default: true\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"closeOnSelect"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"components"},"components ",["badge",{"text":"v3.1.0+"}]],["p",{},"API to overwrite default vue-select components with your own. This can be used to change the clear button or select chevron with your own markup."],["p",{},"The object provided to the components prop will be merged with Vue Select's default components."],["p",{},"See ",["a",{"href":"../guide/components"},"Components guide"]," for more details."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"import Deselect from './Deselect';\nimport OpenIndicator from './OpenIndicator';\n\n// ...\n\ncomponents: {\n  type: Object,\n  default: function () {\n      Deselect,\n      OpenIndicator\n  }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," Deselect "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," './Deselect'"],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":2},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," OpenIndicator "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," './OpenIndicator'"],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"// ...\n"]],["span",{"class":"line","line":5},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":6},["span",{"class":"sDUX4"},"components"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":7},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Object,\n"]],["span",{"class":"line","line":8},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},": "],["span",{"class":"scLti"},"function"],["span",{"class":"sWKip"}," () {\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"      Deselect,\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"      OpenIndicator\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"  }\n"]],["span",{"class":"line","line":12},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"createoption"},"createOption"],["p",{},"User defined function for adding Options"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"createOption: {\n  type: Function,\n  default(newOption) {\n    if (typeof this.optionList[0] === 'object') {\n      newOption = {[this.label]: newOption}\n    }\n\n    this.$emit('option:created', newOption)\n    return newOption\n  }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"createOption"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},"(newOption) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"    if"],["span",{"class":"sWKip"}," ("],["span",{"class":"scLti"},"typeof"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},".optionList["],["span",{"class":"swLay"},"0"],["span",{"class":"sWKip"},"] "],["span",{"class":"scLti"},"==="],["span",{"class":"sHTXl"}," 'object'"],["span",{"class":"sWKip"},") {\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"      newOption "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," {["],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".label]: newOption}\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":7},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":8},["span",{"class":"swLay"},"    this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"$emit"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'option:created'"],["span",{"class":"sWKip"},", newOption)\n"]],["span",{"class":"line","line":9},["span",{"class":"scLti"},"    return"],["span",{"class":"sWKip"}," newOption\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"  }\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"deselectfromdropdown"},"deselectFromDropdown ",["badge",{"text":"v3.12.0+"}]],["p",{},"Determines whether the user can deselect an option by clicking\nit from within the dropdown menu."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"deselectFromDropdown: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"deselectFromDropdown"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"dir"},"dir"],["p",{},"Sets RTL support. Accepts ",["code",{},"ltr"],", ",["code",{},"rtl"],", ",["code",{},"auto"],"."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"dir: {\n    type: String,\n    default: \"auto\"\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"dir"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"auto\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"disabled"},"disabled"],["p",{},"Disable the entire component."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"disabled: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"disabled"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"dropdownshouldopen"},"dropdownShouldOpen ",["badge",{"text":"v3.12.0+"}]],["p",{},"Determines whether the dropdown should open. Used\nfor overriding the default dropdown behaviour. Receives\nthe vue-select instance as the single argument to the function."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"dropdownShouldOpen: {\n    type: Function,\n    default({noDrop, open, mutableLoading}) {\n      return noDrop ? false : open && !mutableLoading;\n    }\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"dropdownShouldOpen"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},"({noDrop, open, mutableLoading}) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"      return"],["span",{"class":"sWKip"}," noDrop "],["span",{"class":"scLti"},"?"],["span",{"class":"swLay"}," false"],["span",{"class":"scLti"}," :"],["span",{"class":"sWKip"}," open "],["span",{"class":"scLti"},"&&"],["span",{"class":"scLti"}," !"],["span",{"class":"sWKip"},"mutableLoading;\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"}\n"]]]],["h2",{"id":"filter"},"filter"],["p",{},"Callback to filter results when search text\nis provided. Default implementation loops\neach option, and returns the result of\nthis.filterBy."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"filter: {\n    type: Function,\n    default(options, search) {\n        return options.filter(option => {\n            let label = this.getOptionLabel(option);\n            if (typeof label === \"number\") {\n                label = label.toString();\n            }\n            return this.filterBy(option, label, search);\n        });\n    }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"filter"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},"(options, search) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"        return"],["span",{"class":"sWKip"}," options."],["span",{"class":"sDUX4"},"filter"],["span",{"class":"sWKip"},"("],["span",{"class":"sf26o"},"option"],["span",{"class":"scLti"}," =>"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":5},["span",{"class":"scLti"},"            let"],["span",{"class":"sWKip"}," label "],["span",{"class":"scLti"},"="],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"getOptionLabel"],["span",{"class":"sWKip"},"(option);\n"]],["span",{"class":"line","line":6},["span",{"class":"scLti"},"            if"],["span",{"class":"sWKip"}," ("],["span",{"class":"scLti"},"typeof"],["span",{"class":"sWKip"}," label "],["span",{"class":"scLti"},"==="],["span",{"class":"sHTXl"}," \"number\""],["span",{"class":"sWKip"},") {\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"                label "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," label."],["span",{"class":"sDUX4"},"toString"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"            }\n"]],["span",{"class":"line","line":9},["span",{"class":"scLti"},"            return"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"filterBy"],["span",{"class":"sWKip"},"(option, label, search);\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"        });\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":12},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"filterable"},"filterable"],["p",{},"When true, existing options will be filtered\nby the search text. Should not be used in conjunction\nwith taggable."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"filterable: {\n    type: Boolean,\n    default: true\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"filterable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"filterby"},"filterBy"],["p",{},"Callback to determine if the provided option should\nmatch the current search text. Used to determine\nif the option should be displayed."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"filterBy: {\n  type: Function,\n  default(option, label, search) {\n    return (label || '').toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1\n  }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"filterBy"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},"(option, label, search) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"    return"],["span",{"class":"sWKip"}," (label "],["span",{"class":"scLti"},"||"],["span",{"class":"sHTXl"}," ''"],["span",{"class":"sWKip"},")."],["span",{"class":"sDUX4"},"toLocaleLowerCase"],["span",{"class":"sWKip"},"()."],["span",{"class":"sDUX4"},"indexOf"],["span",{"class":"sWKip"},"(search."],["span",{"class":"sDUX4"},"toLocaleLowerCase"],["span",{"class":"sWKip"},"()) "],["span",{"class":"scLti"},">"],["span",{"class":"scLti"}," -"],["span",{"class":"swLay"},"1\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"  }\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"getoptionkey"},"getOptionKey"],["p",{},"Callback to get an option key. If ",["code",{},"option"],"\nis an object and has an ",["code",{},"id"],", returns ",["code",{},"option.id"],"\nby default, otherwise tries to serialize ",["code",{},"option"],"\nto JSON."],["p",{},"The key must be unique for an option."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"getOptionKey: {\n  type: Function,\n  default(option) {\n    if (typeof option === 'object' && option.id) {\n      return option.id\n    } else {\n      try {\n        return JSON.stringify(option)\n      } catch(e) {\n        return console.warn(\n          `[vue-select warn]: Could not stringify option ` +\n          `to generate unique key. Please provide 'getOptionKey' prop ` +\n          `to return a unique key for each option.\\n` +\n          'https://vue-select.org/api/props.html#getoptionkey'\n        )\n        return null\n      }\n    }\n  }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"getOptionKey"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},"(option) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"    if"],["span",{"class":"sWKip"}," ("],["span",{"class":"scLti"},"typeof"],["span",{"class":"sWKip"}," option "],["span",{"class":"scLti"},"==="],["span",{"class":"sHTXl"}," 'object'"],["span",{"class":"scLti"}," &&"],["span",{"class":"sWKip"}," option.id) {\n"]],["span",{"class":"line","line":5},["span",{"class":"scLti"},"      return"],["span",{"class":"sWKip"}," option.id\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"    } "],["span",{"class":"scLti"},"else"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":7},["span",{"class":"scLti"},"      try"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":8},["span",{"class":"scLti"},"        return"],["span",{"class":"swLay"}," JSON"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"stringify"],["span",{"class":"sWKip"},"(option)\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"      } "],["span",{"class":"scLti"},"catch"],["span",{"class":"sWKip"},"(e) {\n"]],["span",{"class":"line","line":10},["span",{"class":"scLti"},"        return"],["span",{"class":"sWKip"}," console."],["span",{"class":"sDUX4"},"warn"],["span",{"class":"sWKip"},"(\n"]],["span",{"class":"line","line":11},["span",{"class":"sHTXl"},"          `[vue-select warn]: Could not stringify option `"],["span",{"class":"scLti"}," +\n"]],["span",{"class":"line","line":12},["span",{"class":"sHTXl"},"          `to generate unique key. Please provide 'getOptionKey' prop `"],["span",{"class":"scLti"}," +\n"]],["span",{"class":"line","line":13},["span",{"class":"sHTXl"},"          `to return a unique key for each option."],["span",{"class":"swLay"},"\\n"],["span",{"class":"sHTXl"},"`"],["span",{"class":"scLti"}," +\n"]],["span",{"class":"line","line":14},["span",{"class":"sHTXl"},"          'https://vue-select.org/api/props.html#getoptionkey'\n"]],["span",{"class":"line","line":15},["span",{"class":"sWKip"},"        )\n"]],["span",{"class":"line","line":16},["span",{"class":"scLti"},"        return"],["span",{"class":"swLay"}," null\n"]],["span",{"class":"line","line":17},["span",{"class":"sWKip"},"      }\n"]],["span",{"class":"line","line":18},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":19},["span",{"class":"sWKip"},"  }\n"]],["span",{"class":"line","line":20},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"getoptionlabel"},"getOptionLabel"],["p",{},"Callback to generate the label text. If ",["code",{},"{option}"],"\nis an object, returns ",["code",{},"option[this.label]"]," by default."],["p",{},"Label text is used for filtering comparison and\ndisplaying. If you only need to adjust the\ndisplay, you should use the ",["code",{},"option"]," and\n",["code",{},"selected-option"]," slots."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"getOptionLabel: {\n  type: Function,\n  default(option) {\n    if (typeof option === 'object') {\n      if (!option.hasOwnProperty(this.label)) {\n        return console.warn(\n          `[vue-select warn]: Label key \"option.${this.label}\" does not` +\n          ` exist in options object ${JSON.stringify(option)}.\\n` +\n          'https://vue-select.org/api/props.html#getoptionlabel'\n        )\n      }\n      return option[this.label]\n    }\n    return option;\n  }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"getOptionLabel"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},"(option) {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"    if"],["span",{"class":"sWKip"}," ("],["span",{"class":"scLti"},"typeof"],["span",{"class":"sWKip"}," option "],["span",{"class":"scLti"},"==="],["span",{"class":"sHTXl"}," 'object'"],["span",{"class":"sWKip"},") {\n"]],["span",{"class":"line","line":5},["span",{"class":"scLti"},"      if"],["span",{"class":"sWKip"}," ("],["span",{"class":"scLti"},"!"],["span",{"class":"sWKip"},"option."],["span",{"class":"sDUX4"},"hasOwnProperty"],["span",{"class":"sWKip"},"("],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".label)) {\n"]],["span",{"class":"line","line":6},["span",{"class":"scLti"},"        return"],["span",{"class":"sWKip"}," console."],["span",{"class":"sDUX4"},"warn"],["span",{"class":"sWKip"},"(\n"]],["span",{"class":"line","line":7},["span",{"class":"sHTXl"},"          `[vue-select warn]: Label key \"option.${"],["span",{"class":"swLay"},"this"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"label"],["span",{"class":"sHTXl"},"}\" does not`"],["span",{"class":"scLti"}," +\n"]],["span",{"class":"line","line":8},["span",{"class":"sHTXl"},"          ` exist in options object ${"],["span",{"class":"swLay"},"JSON"],["span",{"class":"sHTXl"},"."],["span",{"class":"sDUX4"},"stringify"],["span",{"class":"sHTXl"},"("],["span",{"class":"sWKip"},"option"],["span",{"class":"sHTXl"},")"],["span",{"class":"sHTXl"},"}."],["span",{"class":"swLay"},"\\n"],["span",{"class":"sHTXl"},"`"],["span",{"class":"scLti"}," +\n"]],["span",{"class":"line","line":9},["span",{"class":"sHTXl"},"          'https://vue-select.org/api/props.html#getoptionlabel'\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"        )\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"      }\n"]],["span",{"class":"line","line":12},["span",{"class":"scLti"},"      return"],["span",{"class":"sWKip"}," option["],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".label]\n"]],["span",{"class":"line","line":13},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":14},["span",{"class":"scLti"},"    return"],["span",{"class":"sWKip"}," option;\n"]],["span",{"class":"line","line":15},["span",{"class":"sWKip"},"  }\n"]],["span",{"class":"line","line":16},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"inputid"},"inputId"],["p",{},"Sets the id of the input element."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"inputId: {\n    type: String\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"inputId"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"label"},"label"],["p",{},"Tells vue-select what key to use when generating option\nlabels when each ",["code",{},"option"]," is an object."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"label: {\n    type: String,\n    default: \"label\"\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"label"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"label\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"loading"},"loading"],["p",{},"Show spinner if the component is in a loading state."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"loading: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"loading"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"maxheight"},"maxHeight"],["p",{},"::: warning Deprecated in ",["code",{},"v2.x"]," & Removed in ",["code",{},"v3.0"],"\nThis prop was removed in ",["code",{},"v3.0"],". You can use the ",["code",{},"$vs-dropdown-max-height"],"\nSCSS variable to adjust this setting in ",["code",{},"v3.x"],".\n:::"],["p",{},"Sets the max-height property on the dropdown list."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"maxHeight: {\n    type: String,\n    default: \"400px\"\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"maxHeight"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"400px\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"multiple"},"multiple"],["p",{},"Equivalent to the ",["code",{},"multiple"]," attribute on a ",["code",{},"<select>"]," input."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"multiple: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"multiple"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"nodrop"},"noDrop"],["p",{},"Disable the dropdown entirely."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"noDrop: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"noDrop"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"ontab"},"onTab"],["p",{},"Select the current value if ",["code",{},"selectOnTab"]," is enabled"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"onTab: {\n    type: Function,\n    default: function() {\n        if (this.selectOnTab) {\n            this.typeAheadSelect();\n        }\n    }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"onTab"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"scLti"},"function"],["span",{"class":"sWKip"},"() {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"        if"],["span",{"class":"sWKip"}," ("],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".selectOnTab) {\n"]],["span",{"class":"line","line":5},["span",{"class":"swLay"},"            this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"typeAheadSelect"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"        }\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"options"},"options"],["p",{},"An array of strings or objects to be used as dropdown choices.\nIf you are using an array of objects, vue-select will look for\na ",["code",{},"label"]," key (ex. ",["code",{},"[{label: 'Canada', value: 'CA'}]"],"). A\ncustom label key can be set with the ",["code",{},"label"]," prop."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"options: {\n    type: Array,\n    default() {\n        return [];\n    }\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"options"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Array,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},"() {\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"        return"],["span",{"class":"sWKip"}," [];\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"placeholder"},"placeholder"],["p",{},"Equivalent to the ",["code",{},"placeholder"]," attribute on an ",["code",{},"<input>"],"."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"placeholder: {\n    type: String,\n    default: \"\"\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"placeholder"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"pushtags"},"pushTags"],["p",{},"When true, newly created tags will be added to\nthe options list."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"pushTags: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"pushTags"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"reduce"},"reduce"],["p",{},"When working with objects, the reduce\nprop allows you to transform a given\nobject to only the information you\nwant passed to a v-model binding\nor @input event."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"reduce: {\n  type: Function,\n  default: option => option,\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"reduce"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"option"],["span",{"class":"scLti"}," =>"],["span",{"class":"sWKip"}," option,\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"resetonoptionschange"},"resetOnOptionsChange"],["p",{},"When false, updating the options will not reset the selected value."],["p",{},"Since ",["code",{},"v3.4+"]," the prop accepts either a ",["code",{},"boolean"]," or ",["code",{},"function"]," that returns a ",["code",{},"boolean"],"."],["p",{},"If defined as a function, it will receive the params listed below."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n* @type {Boolean|Function}\n* @param {Array} newOptions\n* @param {Array} oldOptions\n* @param {Array} selectedValue\n*/\nresetOnOptionsChange: {\n    default: false,\n    validator: (value) => ['function', 'boolean'].includes(typeof value)\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"},"* "],["span",{"class":"scLti"},"@type"],["span",{"class":"sDUX4"}," {Boolean|Function}\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"},"* "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Array}"],["span",{"class":"sWKip"}," newOptions\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"* "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Array}"],["span",{"class":"sWKip"}," oldOptions\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"},"* "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Array}"],["span",{"class":"sWKip"}," selectedValue\n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"},"*/\n"]],["span",{"class":"line","line":7},["span",{"class":"sDUX4"},"resetOnOptionsChange"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":8},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":9},["span",{"class":"sDUX4"},"    validator"],["span",{"class":"sWKip"},": ("],["span",{"class":"sf26o"},"value"],["span",{"class":"sWKip"},") "],["span",{"class":"scLti"},"=>"],["span",{"class":"sWKip"}," ["],["span",{"class":"sHTXl"},"'function'"],["span",{"class":"sWKip"},", "],["span",{"class":"sHTXl"},"'boolean'"],["span",{"class":"sWKip"},"]."],["span",{"class":"sDUX4"},"includes"],["span",{"class":"sWKip"},"("],["span",{"class":"scLti"},"typeof"],["span",{"class":"sWKip"}," value)\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"searchable"},"searchable"],["p",{},"Enable/disable filtering the options."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"searchable: {\n    type: Boolean,\n    default: true\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"searchable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"selectable"},"selectable ",["badge",{"text":"v3.3.0+"}]],["p",{},"The ",["code",{},"selectable"]," prop determines if an option is selectable or not. If ",["code",{},"selectable"]," returns false\nfor a given option, it will be displayed with a ",["code",{},"vs__dropdown-option--disabled"]," class. The option\nwill be disabled and unable to be selected."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"selectable: {\n  type: Function,\n  /**\n   * @param {Object|String} option\n   * @return {boolean}\n   */\n  default: option => true,\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"selectable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"},"  /**\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"   * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Object|String}"],["span",{"class":"sWKip"}," option\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"},"   * "],["span",{"class":"scLti"},"@return"],["span",{"class":"sDUX4"}," {boolean}\n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"},"   */\n"]],["span",{"class":"line","line":7},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"option"],["span",{"class":"scLti"}," =>"],["span",{"class":"swLay"}," true"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"selectontab"},"selectOnTab"],["p",{},"When true, hitting the 'tab' key will select the current select value"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"selectOnTab: {\n    type: Boolean,\n    default: false\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"selectOnTab"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"}\n"]]]],["h2",{"id":"tabindex"},"tabindex"],["p",{},"Set the tabindex for the input field."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"tabindex: {\n    type: Number,\n    default: null\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"tabindex"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Number,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"null\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"taggable"},"taggable"],["p",{},"Enable/disable creating options from searchInput."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"taggable: {\n    type: Boolean,\n    default: false\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"taggable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"false\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"transition"},"transition"],["p",{},"Sets a Vue transition property on the ",["code",{},".dropdown-menu"],". vue-select\ndoes not include CSS for transitions, you'll need to add them yourself."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"transition: {\n    type: String,\n    default: \"fade\"\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"transition"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": String,\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"fade\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"uid"},"uid"],["p",{},"A unique identifier used to generate IDs and DOM attributes.\nMust be unique for every instance of the component."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"uid: {\n  type: [String, Number],\n  default: () => uniqueId(),\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"uid"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": [String, Number],\n"]],["span",{"class":"line","line":3},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},": () "],["span",{"class":"scLti"},"=>"],["span",{"class":"sDUX4"}," uniqueId"],["span",{"class":"sWKip"},"(),\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"value"},"value"],["p",{},"Contains the currently selected value. Very similar to a\n",["code",{},"value"]," attribute on an ",["code",{},"<input>"],". You can listen for changes\nusing the 'input' event."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"value: {\n    default: null\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"value"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"null\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"},\n"]]]],["style",{},"html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"appendtobody","depth":2,"text":"appendToBody "},{"id":"autocomplete","depth":2,"text":"autocomplete"},{"id":"autoscroll","depth":2,"text":"autoscroll "},{"id":"calculateposition","depth":2,"text":"calculatePosition "},{"id":"clearable","depth":2,"text":"clearable"},{"id":"clearsearchonblur","depth":2,"text":"clearSearchOnBlur"},{"id":"clearsearchonselect","depth":2,"text":"clearSearchOnSelect"},{"id":"closeonselect","depth":2,"text":"closeOnSelect"},{"id":"components","depth":2,"text":"components "},{"id":"createoption","depth":2,"text":"createOption"},{"id":"deselectfromdropdown","depth":2,"text":"deselectFromDropdown "},{"id":"dir","depth":2,"text":"dir"},{"id":"disabled","depth":2,"text":"disabled"},{"id":"dropdownshouldopen","depth":2,"text":"dropdownShouldOpen "},{"id":"filter","depth":2,"text":"filter"},{"id":"filterable","depth":2,"text":"filterable"},{"id":"filterby","depth":2,"text":"filterBy"},{"id":"getoptionkey","depth":2,"text":"getOptionKey"},{"id":"getoptionlabel","depth":2,"text":"getOptionLabel"},{"id":"inputid","depth":2,"text":"inputId"},{"id":"label","depth":2,"text":"label"},{"id":"loading","depth":2,"text":"loading"},{"id":"maxheight","depth":2,"text":"maxHeight"},{"id":"multiple","depth":2,"text":"multiple"},{"id":"nodrop","depth":2,"text":"noDrop"},{"id":"ontab","depth":2,"text":"onTab"},{"id":"options","depth":2,"text":"options"},{"id":"placeholder","depth":2,"text":"placeholder"},{"id":"pushtags","depth":2,"text":"pushTags"},{"id":"reduce","depth":2,"text":"reduce"},{"id":"resetonoptionschange","depth":2,"text":"resetOnOptionsChange"},{"id":"searchable","depth":2,"text":"searchable"},{"id":"selectable","depth":2,"text":"selectable "},{"id":"selectontab","depth":2,"text":"selectOnTab"},{"id":"tabindex","depth":2,"text":"tabindex"},{"id":"taggable","depth":2,"text":"taggable"},{"id":"transition","depth":2,"text":"transition"},{"id":"uid","depth":2,"text":"uid"},{"id":"value","depth":2,"text":"value"}]}},"stem":"api/props","extension":"md","meta":{},"seo":{"title":"Props","description":""}}


id: content/api/slots.md
checksum: 53ee1ba136a9f90e0aaa3dc43f1d3947
parsedContent:
{"id":"content/api/slots.md","path":"/api/slots","title":"Slots","description":"::: tip\nVue Select leverages scoped slots to allow for total customization of the presentation layer.\nSlots can be used to change the look and feel of the UI, or to simply swap out text.\n:::","body":{"type":"minimal","value":[["p",{},"::: tip\nVue Select leverages scoped slots to allow for total customization of the presentation layer.\nSlots can be used to change the look and feel of the UI, or to simply swap out text.\n:::"],["style",{},"\n  .slot-docs h2 {\n    border-top: 1px solid #f0f0f0;\n    border-bottom: none;\n    margin-top: 2rem;\n    padding-top: 2rem;\n  }\n  .slot-docs h2:first-child {\n    border-top: none;\n    margin-top: 0;\n  }\n"],["div",{"className":["slot-docs"]},["h2",{"id":"footer"},["code",{},"footer"]," ",["badge",{"text":"3.8.0+"}]],["p",{},"Displayed at the bottom of the component, below ",["code",{},".vs__dropdown-toggle"],"."],["p",{},"When implementing this slot, you'll likely need to use ",["code",{},"appendToBody"]," to position the dropdown.\nOtherwise content in this slot will affect it's positioning."],["ul",{},["li",{},["code",{},"search {string}"]," - the current search query"],["li",{},["code",{},"loading {boolean}"]," - is the component loading"],["li",{},["code",{},"searching {boolean}"]," - is the component searching"],["li",{},["code",{},"filteredOptions {array}"]," - options filtered by the search text"],["li",{},["code",{},"deselect {function}"]," - function to deselect an option"]],["slot-footer",{},"\n<<< @/.vitepress/components/SlotFooter.vue\n",["h2",{"id":"header"},["code",{},"header"]," ",["badge",{"text":"3.8.0+"}]],["p",{},"Displayed at the top of the component, above ",["code",{},".vs__dropdown-toggle"],"."],["ul",{},["li",{},["code",{},"search {string}"]," - the current search query"],["li",{},["code",{},"loading {boolean}"]," - is the component loading"],["li",{},["code",{},"searching {boolean}"]," - is the component searching"],["li",{},["code",{},"filteredOptions {array}"]," - options filtered by the search text"],["li",{},["code",{},"deselect {function}"]," - function to deselect an option"]],["slot-header",{},"\n<<< @/.vitepress/components/SlotHeader.vue\n",["h2",{"id":"list-footer"},["code",{},"list-footer"]," ",["badge",{"text":"3.8.0+"}]],["p",{},"Displayed as the last item in the dropdown. No content by default. Parent element is the ",["code",{},"<ul>"],",\nso this slot should contain a root ",["code",{},"<li>"],"."],["ul",{},["li",{},["code",{},"search {string}"]," - the current search query"],["li",{},["code",{},"loading {boolean}"]," - is the component loading"],["li",{},["code",{},"searching {boolean}"]," - is the component searching"],["li",{},["code",{},"filteredOptions {array}"]," - options filtered by the search text"]],["slot-list-footer",{},"\n<<< @/.vitepress/components/SlotListFooter.vue\n",["h2",{"id":"list-header"},["code",{},"list-header"]," ",["badge",{"text":"3.8.0+"}]],["p",{},"Displayed as the first item in the dropdown. No content by default. Parent element is the ",["code",{},"<ul>"],",\nso this slot should contain a root ",["code",{},"<li>"],"."],["ul",{},["li",{},["code",{},"search {string}"]," - the current search query"],["li",{},["code",{},"loading {boolean}"]," - is the component loading"],["li",{},["code",{},"searching {boolean}"]," - is the component searching"],["li",{},["code",{},"filteredOptions {array}"]," - options filtered by the search text"]],["slot-list-header",{},"\n<<< @/.vitepress/components/SlotListHeader.vue\n",["h2",{"id":"no-options"},["code",{},"no-options"]],["p",{},"The no options slot is displayed above ",["code",{},"list-footer"]," in the dropdown when\n",["code",{},"filteredOptions.length === 0"],"."],["ul",{},["li",{},["code",{},"search {string}"]," - the current search query"],["li",{},["code",{},"loading {boolean}"]," - is the component loading"],["li",{},["code",{},"searching {boolean}"]," - is the component searching"]],["slot-no-options",{},"\n<<< @/.vitepress/components/SlotNoOptions.vue\n",["h2",{"id":"open-indicator"},["code",{},"open-indicator"]],["p",{},"The open indicator is the caret icon on the component used to indicate dropdown status."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"attributes: {\n  'ref': 'openIndicator',\n  'role': 'presentation',\n  'class': 'vs__open-indicator',\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"attributes"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sHTXl"},"  'ref'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'openIndicator'"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":3},["span",{"class":"sHTXl"},"  'role'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'presentation'"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":4},["span",{"class":"sHTXl"},"  'class'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'vs__open-indicator'"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"}\n"]]]],["slot-open-indicator",{},"\n<<< @/.vitepress/components/SlotOpenIndicator.vue\n",["h2",{"id":"option"},["code",{},"option"]],["p",{},"The current option within the dropdown, contained within ",["code",{},"<li>"],"."],["ul",{},["li",{},["code",{},"option {Object}"]," - The currently iterated option from ",["code",{},"filteredOptions"]]],["slot-option",{},"\n<<< @/.vitepress/components/SlotOption.vue\n",["h2",{"id":"search"},["code",{},"search"]],["p",{},"The search input has a lot of bindings, but they're grouped into ",["code",{},"attributes"]," and ",["code",{},"events"],". Most\nof the time, you will just be binding those two with ",["code",{},"v-on=\"events\""]," and ",["code",{},"v-bind=\"attributes\""],"."],["p",{},"If you want the default styling, you'll need to add ",["code",{},".vs__search"]," to the input you provide."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"  /**\n   * Attributes to be bound to a search input.\n   */\n  attributes: {\n    'disabled': this.disabled,\n    'placeholder': this.searchPlaceholder,\n    'tabindex': this.tabindex,\n    'readonly': !this.searchable,\n    'id': this.inputId,\n    'aria-autocomplete': 'list',\n    'aria-labelledby': `vs${this.uid}__combobox`,\n    'aria-controls': `vs${this.uid}__listbox`,\n    'aria-activedescendant': this.typeAheadPointer > -1\n      ? `vs${this.uid}__option-${this.typeAheadPointer}`\n      : '',\n    'ref': 'search',\n    'type': 'search',\n    'autocomplete': this.autocomplete,\n    'value': this.search,\n  },\n  /**\n   * Events that this element should handle.\n   */\n  events: {\n    'compositionstart': () => this.isComposing = true,\n    'compositionend': () => this.isComposing = false,\n    'keydown': this.onSearchKeyDown,\n    'blur': this.onSearchBlur,\n    'focus': this.onSearchFocus,\n    'input': (e) => this.search = e.target.value,\n  }\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"  /**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"},"   * Attributes to be bound to a search input.\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"},"   */\n"]],["span",{"class":"line","line":4},["span",{"class":"sDUX4"},"  attributes"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":5},["span",{"class":"sHTXl"},"    'disabled'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".disabled,\n"]],["span",{"class":"line","line":6},["span",{"class":"sHTXl"},"    'placeholder'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".searchPlaceholder,\n"]],["span",{"class":"line","line":7},["span",{"class":"sHTXl"},"    'tabindex'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".tabindex,\n"]],["span",{"class":"line","line":8},["span",{"class":"sHTXl"},"    'readonly'"],["span",{"class":"sWKip"},": "],["span",{"class":"scLti"},"!"],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".searchable,\n"]],["span",{"class":"line","line":9},["span",{"class":"sHTXl"},"    'id'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".inputId,\n"]],["span",{"class":"line","line":10},["span",{"class":"sHTXl"},"    'aria-autocomplete'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'list'"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":11},["span",{"class":"sHTXl"},"    'aria-labelledby'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"`vs${"],["span",{"class":"swLay"},"this"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"uid"],["span",{"class":"sHTXl"},"}__combobox`"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":12},["span",{"class":"sHTXl"},"    'aria-controls'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"`vs${"],["span",{"class":"swLay"},"this"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"uid"],["span",{"class":"sHTXl"},"}__listbox`"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":13},["span",{"class":"sHTXl"},"    'aria-activedescendant'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".typeAheadPointer "],["span",{"class":"scLti"},">"],["span",{"class":"scLti"}," -"],["span",{"class":"swLay"},"1\n"]],["span",{"class":"line","line":14},["span",{"class":"scLti"},"      ?"],["span",{"class":"sHTXl"}," `vs${"],["span",{"class":"swLay"},"this"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"uid"],["span",{"class":"sHTXl"},"}__option-${"],["span",{"class":"swLay"},"this"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"typeAheadPointer"],["span",{"class":"sHTXl"},"}`\n"]],["span",{"class":"line","line":15},["span",{"class":"scLti"},"      :"],["span",{"class":"sHTXl"}," ''"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":16},["span",{"class":"sHTXl"},"    'ref'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'search'"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":17},["span",{"class":"sHTXl"},"    'type'"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"'search'"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":18},["span",{"class":"sHTXl"},"    'autocomplete'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".autocomplete,\n"]],["span",{"class":"line","line":19},["span",{"class":"sHTXl"},"    'value'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".search,\n"]],["span",{"class":"line","line":20},["span",{"class":"sWKip"},"  },\n"]],["span",{"class":"line","line":21},["span",{"class":"sKA9v"},"  /**\n"]],["span",{"class":"line","line":22},["span",{"class":"sKA9v"},"   * Events that this element should handle.\n"]],["span",{"class":"line","line":23},["span",{"class":"sKA9v"},"   */\n"]],["span",{"class":"line","line":24},["span",{"class":"sDUX4"},"  events"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":25},["span",{"class":"sHTXl"},"    'compositionstart'"],["span",{"class":"sWKip"},": () "],["span",{"class":"scLti"},"=>"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},".isComposing "],["span",{"class":"scLti"},"="],["span",{"class":"swLay"}," true"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":26},["span",{"class":"sHTXl"},"    'compositionend'"],["span",{"class":"sWKip"},": () "],["span",{"class":"scLti"},"=>"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},".isComposing "],["span",{"class":"scLti"},"="],["span",{"class":"swLay"}," false"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":27},["span",{"class":"sHTXl"},"    'keydown'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".onSearchKeyDown,\n"]],["span",{"class":"line","line":28},["span",{"class":"sHTXl"},"    'blur'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".onSearchBlur,\n"]],["span",{"class":"line","line":29},["span",{"class":"sHTXl"},"    'focus'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"this"],["span",{"class":"sWKip"},".onSearchFocus,\n"]],["span",{"class":"line","line":30},["span",{"class":"sHTXl"},"    'input'"],["span",{"class":"sWKip"},": ("],["span",{"class":"sf26o"},"e"],["span",{"class":"sWKip"},") "],["span",{"class":"scLti"},"=>"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},".search "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," e.target.value,\n"]],["span",{"class":"line","line":31},["span",{"class":"sWKip"},"  }\n"]]]],["slot-search",{},"\n<<< @/.vitepress/components/SlotSearch.vue{5-6}\n",["h2",{"id":"selected-option"},["code",{},"selected-option"]],["p",{},"The text displayed within ",["code",{},"selected-option-container"],"."],["p",{},"This slot doesn't exist if ",["code",{},"selected-option-container"]," is implemented."],["ul",{},["li",{},["code",{},"option {Object}"]," - A selected option"]],["slot-selected-option",{},"\n<<< @/.vitepress/components/SlotSelectedOption.vue\n",["h2",{"id":"selected-option-container"},["code",{},"selected-option-container"]],["p",{},"This is the root element where ",["code",{},"v-for=\"option in selectedValue\""],". Most of the time you'll want to\nuse ",["code",{},"selected-option"],", but this container is useful if you want to disable the deselect button,\nor have fine grain control over the markup."],["ul",{},["li",{},["code",{},"option {Object}"]," - Currently iterated selected option"],["li",{},["code",{},"deselect {Function}"]," - Method used to deselect a given option when ",["code",{},"multiple"]," is true"],["li",{},["code",{},"disabled {Boolean}"]," - Determine if the component is disabled"],["li",{},["code",{},"multiple {Boolean}"]," - If the component supports the selection of multiple values"]],["slot-selected-option-container",{},"\n<<< @/.vitepress/components/SlotSelectedOptionContainer.vue\n",["h2",{"id":"spinner"},["code",{},"spinner"]],["ul",{},["li",{},["code",{},"loading {Boolean}"]," - if the component is in a loading state"]],["slot-spinner",{},"\n<<< @/.vitepress/components/SlotSpinner.vue\n"]]]]]]]]]]]],["style",{},"html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"footer","depth":2,"text":"footer "}]}},"stem":"api/slots","extension":"md","meta":{},"seo":{"title":"Slots","description":"::: tip\nVue Select leverages scoped slots to allow for total customization of the presentation layer.\nSlots can be used to change the look and feel of the UI, or to simply swap out text.\n:::"}}


id: content/guide/accessibility.md
checksum: 0ebde3859ead6ca618f3ecd520637aab
parsedContent:
{"id":"content/guide/accessibility.md","path":"/guide/accessibility","title":"Accessibility","description":"Vue Select aims to follow the WAI-ARIA best practices for the\ncombobox and\nlistbox widgets.","body":{"type":"minimal","value":[["p",{},"Vue Select aims to follow the WAI-ARIA best practices for the\n",["a",{"href":"https://www.w3.org/TR/wai-aria-practices-1.1/#combobox","rel":["nofollow"]},"combobox"]," and\n",["a",{"href":"https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox","rel":["nofollow"]},"listbox"]," widgets."],["p",{},"The UX of the component is designed around the HTML ",["code",{},"<select>"]," element, while following the WAI-ARIA\nspecifications and best practices for creating accessible components."],["h2",{"id":"combobox"},"Combobox"],["ul",{},["li",{},["a",{"href":"https://www.w3.org/TR/wai-aria-practices-1.1/#combobox","rel":["nofollow"]},"WAI-ARIA Combobox - Best Practices"]],["li",{},["a",{"href":"https://www.w3.org/TR/wai-aria-1.1/#combobox","rel":["nofollow"]},"WAI-ARIA Combobox - Specification"]]],["h2",{"id":"listbox"},"Listbox"],["ul",{},["li",{},["a",{"href":"https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox","rel":["nofollow"]},"WAI-ARIA Listbox - Best Practices"]]],["h3",{"id":"autocomplete"},"Autocomplete"],["p",{},"WAI-ARIA suggests four forms of autocomplete for Comboboxes. Vue Select can be configured to provide\nthese use cases."],["ol",{},["li",{},["strong",{},"No autocomplete"],["blockquote",{},["p",{},"When the popup is triggered, the suggested values it contains are the same regardless of the\ncharacters typed in the textbox."]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :filterable=\"false\" :options=\"['No Autocomplete', 'List Autocomplete']\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :filterable"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"false\""],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"['No Autocomplete', 'List Autocomplete']\""],["span",{"class":"sWKip"}," />\n"]]]],"\n ",["v-select",{":filterable":"false",":options":"['No Autocomplete', 'List Autocomplete']"}]],["li",{},["strong",{},"List autocomplete with manual selection"],["blockquote",{},["p",{},"When the popup is triggered, it presents suggested values that complete or logically\ncorrespond to the characters typed in the textbox. The character string the user has\ntyped will become the value of the textbox unless the user selects a value in the popup."]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select taggable :options=\"['No Autocomplete', 'List Autocomplete']\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," taggable"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"['No Autocomplete', 'List Autocomplete']\""],["span",{"class":"sWKip"}," />\n"]]]],"\n ",["v-select",{"taggable":"",":options":"['No Autocomplete', 'List Autocomplete']"}]],["li",{},["strong",{},"List autocomplete with automatic selection"],["blockquote",{},["p",{},"When the popup is triggered, it presents suggested values that complete or logically\ncorrespond to the characters typed in the textbox, and the first suggestion is automatically\nhighlighted as selected. The automatically selected suggestion becomes the value of the textbox\nwhen the combobox loses focus unless the user chooses a different suggestion or changes the\ncharacter string in the textbox."]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :options=\"['No Autocomplete', 'List Autocomplete']\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"['No Autocomplete', 'List Autocomplete']\""],["span",{"class":"sWKip"}," />\n"]]]],"\n ",["v-select",{":options":"['No Autocomplete', 'List Autocomplete']"}]],["li",{},["strong",{},"List with inline autocomplete"],["blockquote",{},["p",{},"This is the same as list with automatic selection with one additional feature. The portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state."]],["callout",{"type":"warning"},["p",{},"Vue Select does not yet support this configuration, but it is on the roadmap\n",["a",{"href":"https://github.com/sagalbot/vue-select/issues/865","rel":["nofollow"]},"#865"],"."]]]],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"combobox","depth":2,"text":"Combobox"},{"id":"listbox","depth":2,"text":"Listbox","children":[{"id":"autocomplete","depth":3,"text":"Autocomplete"}]}]}},"stem":"guide/accessibility","extension":"md","meta":{},"seo":{"title":"Accessibility","description":"Vue Select aims to follow the WAI-ARIA best practices for the\ncombobox and\nlistbox widgets."}}


id: content/guide/ajax.md
checksum: 4788f1f26df8b55982ba7b28b2dda17c
parsedContent:
{"id":"content/guide/ajax.md","path":"/guide/ajax","title":"Ajax","description":"","body":{"type":"minimal","value":[["h2",{"id":"loading-options-with-ajax"},"Loading Options with AJAX"],["p",{},"The ",["code",{},"search"]," event provides a hook to load options from a parent component\nwhen the search text is updated. It is emitted with two parameters:"],["p",{},["strong",{},"Search Event Parameters"]],["ul",{},["li",{},["code",{},"search {String}"],"     The current search string"],["li",{},["code",{},"loading {Function}"],"  Accepts a boolean parameter to toggle the loading state"]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select @search=\"fetchOptions\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," @search"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"fetchOptions\""],["span",{"class":"sWKip"}," />\n"]]]],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * Triggered when the search text changes.\n *\n * @param search  {String}    Current search text\n * @param loading {Function}    Toggle loading class\n */\nfetchOptions (search, loading) {\n  //  ... do some asynchronous stuff!  \n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * Triggered when the search text changes.\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," *\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," search"],["span",{"class":"sKA9v"},"  {String}    Current search text\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," loading"],["span",{"class":"sKA9v"}," {Function}    Toggle loading class\n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":7},["span",{"class":"sDUX4"},"fetchOptions"],["span",{"class":"sWKip"}," (search, loading) {\n"]],["span",{"class":"line","line":8},["span",{"class":"sKA9v"},"  //  ... do some asynchronous stuff!  \n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"},\n"]]]],["p",{},"The ",["code",{},"loading"]," function accepts a boolean parameter that will be assigned\nto the vue-select internal ",["code",{},"loading"]," property. Call ",["code",{},"loading(true)"]," to set the\n",["code",{},"loading"]," property to ",["code",{},"true"]," - toggling the loading spinner. After your\nasynchronous operation completes, call ",["code",{},"loading(false)"]," to toggle it off."],["h2",{"id":"disabling-filtering"},"Disabling Filtering"],["p",{},"When loading server side options, it can be useful to disable the\nclient side filtering. Use the ",["code",{},"filterable"]," prop to disable filtering."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * When true, existing options will be filtered\n * by the search text. Should not be used in\n * conjunction with taggable.\n * \n * @type {Boolean}\n */\nfilterable: {\n    type: Boolean,\n    default: true\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * When true, existing options will be filtered\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," * by the search text. Should not be used in\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"}," * conjunction with taggable.\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"}," * \n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@type"],["span",{"class":"sDUX4"}," {Boolean}\n"]],["span",{"class":"line","line":7},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":8},["span",{"class":"sDUX4"},"filterable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":9},["span",{"class":"sDUX4"},"    type"],["span",{"class":"sWKip"},": Boolean,\n"]],["span",{"class":"line","line":10},["span",{"class":"scLti"},"    default"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"},\n"]]]],["h2",{"id":"loading-spinner"},"Loading Spinner"],["p",{},"Vue Select includes a default loading spinner that appears when the loading class is present. The\n",["code",{},"spinner"]," slot allows you to implement your own spinner."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<div class=\"spinner\" v-show=\"spinner\">Loading...</div>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"div"],["span",{"class":"sDUX4"}," class"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"spinner\""],["span",{"class":"sDUX4"}," v-show"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"spinner\""],["span",{"class":"sWKip"},">Loading...</"],["span",{"class":"smnu3"},"div"],["span",{"class":"sWKip"},">\n"]]]],["h2",{"id":"library-agnostic"},"Library Agnostic"],["p",{},"Since Vue.js does not ship with ajax functionality as part of the core library, it's up to you to\nprocess the ajax requests in your parent component."],["p",{},"I recommend using ",["a",{"href":"https://github.com/axios/axios","rel":["nofollow"]},"axios"]," for creating your applications HTTP layer,\nor ",["a",{"href":"https://github.com/github/fetch","rel":["nofollow"]},["code",{},"fetch()"]]," for simple requests."],["h2",{"id":"example"},"Example"],["p",{},"The ",["a",{"href":"https://codepen.io/sagalbot/pen/POMeOX","rel":["nofollow"]},"codepen example"]," wraps up all the above concepts and\nsearches GitHub repositories. It also uses scoped slots to add some custom templating."],["code-pen",{"url":"POMeOX","height":400}],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"loading-options-with-ajax","depth":2,"text":"Loading Options with AJAX"},{"id":"disabling-filtering","depth":2,"text":"Disabling Filtering"},{"id":"loading-spinner","depth":2,"text":"Loading Spinner"},{"id":"library-agnostic","depth":2,"text":"Library Agnostic"},{"id":"example","depth":2,"text":"Example"}]}},"stem":"guide/ajax","extension":"md","meta":{},"seo":{"title":"Ajax","description":""}}


id: content/guide/components.md
checksum: a145c9fc9bd14d5e1669810d0b3479fe
parsedContent:
{"id":"content/guide/components.md","path":"/guide/components","title":"Components","description":"","body":{"type":"minimal","value":[["h3",{"id":"prop-components-object"},"Prop: ",["code",{},"components"]," ",["code",{},"{Object}"]],["hr",{}],["p",{},"Vue Select utilizes child components throughout, and exposes an API to overwrite these components\nwith your own, using the ",["code",{},"components"]," ",["code",{},"{Object}"]," prop. The object provided to the ",["code",{},"components"]," prop\nwill be merged with Vue Select's default components."],["p",{},"<<< @/../src/components/childComponents.js{4-7}"],["p",{},"You can override the value of any of these keys with your own components."],["h2",{"id":"deselect"},"Deselect ",["badge",{"text":"v3.1.0+"}]],["p",{},"You may wish to roll your own deselect button. ",["code",{},"Deselect"]," is used within tags on\n",["code",{},"multiple"]," selects, and serves as the clear button for single selects. Maybe you just want to use\na simple ",["code",{},"<button>Clear</button>"]," instead."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :components=\"{Deselect}\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :components"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"{Deselect}\""],["span",{"class":"sWKip"}," />\n"]]]],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"export default {\n  data: () => ({\n    Deselect: {\n      render: createElement => createElement('span', '❌'),\n    },\n  }),\n};\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"export"],["span",{"class":"scLti"}," default"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  data"],["span",{"class":"sWKip"},": () "],["span",{"class":"scLti"},"=>"],["span",{"class":"sWKip"}," ({\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"    Deselect: {\n"]],["span",{"class":"line","line":4},["span",{"class":"sDUX4"},"      render"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"createElement"],["span",{"class":"scLti"}," =>"],["span",{"class":"sDUX4"}," createElement"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'span'"],["span",{"class":"sWKip"},", "],["span",{"class":"sHTXl"},"'❌'"],["span",{"class":"sWKip"},"),\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"    },\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"  }),\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"};\n"]]]],["clearbuttonoverride",{},["p",{},"The same approach applies for ",["code",{},"multiple"]," selects:"],["multiple-clear-button-override",{},["h2",{"id":"openindicator"},"OpenIndicator  ",["badge",{"text":"v3.1.0+"}]],["p",{},"The ",["code",{},"OpenIndicator"]," component is the 'caret' used within the component that adjusts orientation\nbased on whether the dropdown is open or closed."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :components=\"{OpenIndicator}\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :components"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"{OpenIndicator}\""],["span",{"class":"sWKip"}," />\n"]]]],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"export default {\n  data: () => ({\n    selected: ['Canada'],\n    OpenIndicator: {\n      render: createElement => createElement('span', {class: {'toggle': true}}),\n    },\n  }),\n};\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"export"],["span",{"class":"scLti"}," default"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  data"],["span",{"class":"sWKip"},": () "],["span",{"class":"scLti"},"=>"],["span",{"class":"sWKip"}," ({\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"    selected: ["],["span",{"class":"sHTXl"},"'Canada'"],["span",{"class":"sWKip"},"],\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"    OpenIndicator: {\n"]],["span",{"class":"line","line":5},["span",{"class":"sDUX4"},"      render"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"createElement"],["span",{"class":"scLti"}," =>"],["span",{"class":"sDUX4"}," createElement"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'span'"],["span",{"class":"sWKip"},", {class: {"],["span",{"class":"sHTXl"},"'toggle'"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"true"],["span",{"class":"sWKip"},"}}),\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"    },\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"  }),\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"};\n"]]]],["open-indicator-override",{},["h2",{"id":"setting-globally-at-registration"},"Setting Globally at Registration"],["p",{},"If you want all instances of Vue Select to use your custom components throughout your app, while\nonly having to set the implementation once, you can do so when registering Vue Select as a component."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"import Vue from 'vue';\nimport vSelect from 'vue-select';\n\n// Set the components prop default to return our fresh components \nvSelect.props.components.default = () => ({\n  Deselect: {\n    render: createElement => createElement('span', '❌'),\n  },\n  OpenIndicator: {\n    render: createElement => createElement('span', '🔽'),\n  },\n});\n\n// Register the component\nVue.component(vSelect)\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," Vue "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," 'vue'"],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":2},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," vSelect "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," 'vue-select'"],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"// Set the components prop default to return our fresh components \n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"vSelect.props.components."],["span",{"class":"sDUX4"},"default"],["span",{"class":"scLti"}," ="],["span",{"class":"sWKip"}," () "],["span",{"class":"scLti"},"=>"],["span",{"class":"sWKip"}," ({\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"  Deselect: {\n"]],["span",{"class":"line","line":7},["span",{"class":"sDUX4"},"    render"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"createElement"],["span",{"class":"scLti"}," =>"],["span",{"class":"sDUX4"}," createElement"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'span'"],["span",{"class":"sWKip"},", "],["span",{"class":"sHTXl"},"'❌'"],["span",{"class":"sWKip"},"),\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"  },\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"  OpenIndicator: {\n"]],["span",{"class":"line","line":10},["span",{"class":"sDUX4"},"    render"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"createElement"],["span",{"class":"scLti"}," =>"],["span",{"class":"sDUX4"}," createElement"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'span'"],["span",{"class":"sWKip"},", "],["span",{"class":"sHTXl"},"'🔽'"],["span",{"class":"sWKip"},"),\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"  },\n"]],["span",{"class":"line","line":12},["span",{"class":"sWKip"},"});\n"]],["span",{"class":"line","line":13},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":14},["span",{"class":"sKA9v"},"// Register the component\n"]],["span",{"class":"line","line":15},["span",{"class":"sWKip"},"Vue."],["span",{"class":"sDUX4"},"component"],["span",{"class":"sWKip"},"(vSelect)\n"]]]],["custom-component-registration",{}]]]],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"prop-components-object","depth":3,"text":"Prop: components {Object}"},{"id":"deselect","depth":2,"text":"Deselect "}]}},"stem":"guide/components","extension":"md","meta":{},"seo":{"title":"Components","description":""}}


id: content/guide/css.md
checksum: b65c4e0aad0b0a64428b62ee7c28908a
parsedContent:
{"id":"content/guide/css.md","path":"/guide/css","title":"Css","description":"Vue Select offers many APIs for customizing the look and feel from the component. You can use\nscoped slots, custom child components, or modify the built in\nCSS properties.","body":{"type":"minimal","value":[["p",{},"Vue Select offers many APIs for customizing the look and feel from the component. You can use\n",["a",{"href":"../api/slots"},"scoped slots"],", ",["a",{"href":"components"},"custom child components"],", or modify the built in\nCSS properties."],["h2",{"id":"css-variables"},"CSS Variables"],["p",{},"Vue Select uses custom CSS properties throughout the component to handle visual opinions. This\nallows for quite a bit of flexibility in styling, without having to hook into a build system for\ngenerating your own styles with something like SASS. If there is a value that you think should use a\nCSS property instead of a hardcoded CSS value, please submit a PR."],["h2",{"id":"dark-mode-example"},"Dark Mode Example"],["p",{},"Without writing any CSS yourself, you can completely customize the look and feel of Vue Select\nthrough the use of CSS variables. In this example, we adjust the colors of the component to match\nfor a dark mode application."],["p",{},"In this case, the variables are scoped to only this implementation of the component, but you could\nplace these variables anywhere in your applications CSS file to implement at a global level for your\napp."],["p",{},"Check the MDN docs for more info\nabout ",["a",{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties","rel":["nofollow"]},"CSS Custom Properties."]],["css-variables",{"style":"margin-top: 1rem;"},["p",{},"<<< @/.vitepress/components/CssVariables.vue"],["h3",{"id":"available-css-variables-318"},"Available CSS Variables ",["badge",{"type":"primary"},"3.18+"]],["p",{},"<<< @/../src/css/global/variables.css"],["h2",{"id":"scss-deprecated-in-v318"},"SCSS ",["badge",{"type":"warning"},"Deprecated in v3.18"]],["p",{},"::: warning Deprecation Notice\nThe SCSS build been deprecated for the ",["code",{},"v3.x"]," release, and will be\nremoved in ",["code",{},"v4.0.0"],". The files will remain in the v3 codebase if you really need them, but the\nrecommended approach is to leverage the included CSS variables instead.\n:::"],["p",{},"Variables are leveraged in as much of the component styles as possible. If you really want to dig\ninto the SCSS, the files are located in ",["code",{},"src/scss"],". The variables listed below can be found at\n",["a",{"href":"https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss","rel":["nofollow"]},["code",{},"src/scss/global/_variables"]],"\n."],["p",{},"All variables are implemented with ",["code",{},"!default"]," in order to make them easier to override in your\napplication."],["p",{},"<<< @/../src/scss/global/_variables.scss"],["h2",{"id":"overriding-default-styles"},"Overriding Default Styles"],["p",{},"Vue Select takes the approach of using selectors with a single level of specificity, while using\nclasses that are very specific to Vue Select to avoid collisions with your app."],["p",{},"Most classes within Vue Select use the ",["code",{},"vs__"]," prefix, and selectors are generally a single classname\n– unless there is a state being applied to the component."],["p",{},"In order to override a default property in your app, you should add one level of specificity. The\neasiest way to do this, is to add ",["code",{},".v-select"]," before the ",["code",{},"vs__*"]," selector if you want to adjust all\ninstances of Vue Select, or add your own classname if you just want to affect one."],["css-specificity",{},"  \n",["p",{},"<<< @/.vitepress/components/CssSpecificity.vue"],["h2",{"id":"dropdown-transition"},"Dropdown Transition"],["p",{},"By default, the dropdown transitions with a ",["code",{},".15s"]," cubic-bezier opacity fade in/out. The component\nuses the ",["a",{"href":"https://vuejs.org/v2/guide/transitions.html","rel":["nofollow"]},"VueJS transition system"],". By default, the\ntransition name is ",["code",{},"vs__fade"],". There's a couple ways to override or change this transition."],["ol",{},["li",{},"Use the ",["code",{},"transition"]," prop. Applying this prop will change the name of the animation classes and\nnegate the default CSS. If you want to remove it entirely, you can set it to an empty string."]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select transition=\"\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," transition"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"\""],["span",{"class":"sWKip"}," />\n"]]]],["ol",{"start":2},["li",{},"You can also override the default CSS for the ",["code",{},"vs__fade"]," transition. Again, if you wanted to\neliminate the transition entirely:"]],["pre",{"className":"language-css shiki shiki-themes github-light github-dark","code":".vs__fade-enter-active,\n.vs__fade-leave-active {\n    transition: none;\n}\n","language":"css","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},".vs__fade-enter-active"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},".vs__fade-leave-active"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":3},["span",{"class":"swLay"},"    transition"],["span",{"class":"sWKip"},": "],["span",{"class":"swLay"},"none"],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"}\n"]]]]]],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"css-variables","depth":2,"text":"CSS Variables"},{"id":"dark-mode-example","depth":2,"text":"Dark Mode Example","children":[{"id":"available-css-variables-318","depth":3,"text":"Available CSS Variables 3.18+"}]},{"id":"scss-deprecated-in-v318","depth":2,"text":"SCSS Deprecated in v3.18"},{"id":"overriding-default-styles","depth":2,"text":"Overriding Default Styles"}]}},"stem":"guide/css","extension":"md","meta":{},"seo":{"title":"Css","description":"Vue Select offers many APIs for customizing the look and feel from the component. You can use\nscoped slots, custom child components, or modify the built in\nCSS properties."}}


id: content/guide/examples.md
checksum: 7af9dd9dc251c71cbeccefc403e98973
parsedContent:
{"id":"content/guide/examples.md","path":"/guide/examples","title":"Examples","description":"","body":{"type":"minimal","value":[["h3",{"id":"codepen-collection"},"Codepen Collection"],["p",{},"I've put together a collection of examples, including all the examples\nfrom this documentation site on ",["a",{"href":"https://codepen.io/collection/nrkgxV/#","rel":["nofollow"]},"Codepen"],"."]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"codepen-collection","depth":3,"text":"Codepen Collection"}]}},"stem":"guide/examples","extension":"md","meta":{},"seo":{"title":"Examples","description":""}}


id: content/guide/filtering.md
checksum: 8b3db7d8a4db9be463ba72ccef8d363f
parsedContent:
{"id":"content/guide/filtering.md","path":"/guide/filtering","title":"Filtering","description":"Vue Select provides two props accepting functions that can be used to implement custom filtering\nalgorithms.","body":{"type":"minimal","value":[["p",{},"Vue Select provides two props accepting ",["code",{},"functions"]," that can be used to implement custom filtering\nalgorithms."],["ul",{},["li",{},["code",{},"filter"]," ",["badge",{"text":"v2.5.0+"}]],["li",{},["code",{},"filterBy"]," ",["badge",{"text":"v2.5.0+"}]]],["p",{},"By default, the component will perform a very basic check to see if an options label includes\nthe current search text. If you're using scoped slots, you might have information within the\noption templates that should be searchable. Or maybe you just want a better search algorithm that\ncan do fuzzy search matching."],["h2",{"id":"filtering-with-fusejs"},"Filtering with Fuse.js"],["p",{},"You can use the ",["code",{},"filter"]," and ",["code",{},"filterBy"]," props to hook right into something like\n",["a",{"href":"https://fusejs.io/","rel":["nofollow"]},"Fuse.js"]," that can handle searching multiple object keys with fuzzy matchings."],["fuse-filter",{},["p",{},"<<< @/.vitepress/components/FuseFilter.vue"]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"filtering-with-fusejs","depth":2,"text":"Filtering with Fuse.js"}]}},"stem":"guide/filtering","extension":"md","meta":{},"seo":{"title":"Filtering","description":"Vue Select provides two props accepting functions that can be used to implement custom filtering\nalgorithms."}}


id: content/guide/infinite-scroll.md
checksum: 8b2e296700b0a30eddede0033082218e
parsedContent:
{"id":"content/guide/infinite-scroll.md","path":"/guide/infinite-scroll","title":"Infinite Scroll","description":"","body":{"type":"minimal","value":[["script",{"setup":""},"\nimport InfiniteScroll from '@/components/InfiniteScroll.vue'\n"],["p",{},"Vue Select doesn't ship with first party support for infinite scroll, but it's possible to implement\nby hooking into the ",["code",{},"open"],", ",["code",{},"close"],", and ",["code",{},"search"]," events, along with the ",["code",{},"filterable"]," prop, and the\n",["code",{},"list-footer"]," slot."],["p",{},"Let's break down the example below, starting with the ",["code",{},"data"],"."],["ul",{},["li",{},["code",{},"observer"]," - a new ",["code",{},"IntersectionObserver"]," with ",["code",{},"infiniteScroll"]," set as the callback"],["li",{},["code",{},"limit"]," - the number of options to display"],["li",{},["code",{},"search"]," - since we've disabled Vue Selects filtering, we'll need to filter options ourselves"]],["p",{},"When Vue Select opens, the ",["code",{},"open"]," event is emitted and ",["code",{},"onOpen"]," will be called. We wait for\n",["code",{},"$nextTick()"]," so that the ",["code",{},"$ref"]," we need will exist, then begin observing it for intersection."],["p",{},"The observer is set to call ",["code",{},"infiniteScroll"]," when the ",["code",{},"<li>"]," is completely visible within the list.\nSome fancy destructuring is done here to get the first ",["code",{},"ObservedEntry"],", and specifically the\n",["code",{},"isIntersecting"]," & ",["code",{},"target"]," properties. If the ",["code",{},"<li>"]," is intersecting, we increase the ",["code",{},"limit"],", and\nensure that the scroll position remains where it was before the list size changed. Again, it's\nimportant to wait for ",["code",{},"$nextTick"]," here so that the DOM elements have been inserted before setting\nthe scroll position."],["infinite-scroll",{},["p",{},"<<< @/.vitepress/components/InfiniteScroll.vue"]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"stem":"guide/infinite-scroll","extension":"md","meta":{},"seo":{"title":"Infinite Scroll","description":""}}


id: content/guide/install.md
checksum: 8d1b410451f4965ece3d078e82c4a5be
parsedContent:
{"id":"content/guide/install.md","path":"/guide/install","title":"Install","description":"","body":{"type":"minimal","value":[["h2",{"id":"yarn-npm"},"Yarn / NPM"],["p",{},"Install with yarn or npm:"],["pre",{"className":"language-bash shiki shiki-themes github-light github-dark","code":"# Yarn\nyarn add vue-select@beta\n\n# NPM\nnpm install vue-select@beta\n","language":"bash","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"# Yarn\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"yarn"],["span",{"class":"sHTXl"}," add"],["span",{"class":"sHTXl"}," vue-select@beta\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"# NPM\n"]],["span",{"class":"line","line":5},["span",{"class":"sDUX4"},"npm"],["span",{"class":"sHTXl"}," install"],["span",{"class":"sHTXl"}," vue-select@beta\n"]]]],["p",{},"Next you'll import and register the component. You can register the component globally or locally. ",["em",{},"Unsure what this means? Check the ",["a",{"href":"https://vuejs.org/guide/components/registration.html#component-registration","rel":["nofollow"]},"VueJS docs on component registration"],"\n."]],["h3",{"id":"global-registration"},"Global Registration"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"import { createApp } from \"vue\";\nimport vSelect from \"vue-select\";\n\nconst app = createApp({});\n\napp.component('vSelect', vSelect);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," { createApp } "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," \"vue\""],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":2},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," vSelect "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," \"vue-select\""],["span",{"class":"sWKip"},";\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"const"],["span",{"class":"swLay"}," app"],["span",{"class":"scLti"}," ="],["span",{"class":"sDUX4"}," createApp"],["span",{"class":"sWKip"},"({});\n"]],["span",{"class":"line","line":5},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"app."],["span",{"class":"sDUX4"},"component"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'vSelect'"],["span",{"class":"sWKip"},", vSelect);\n"]]]],["h3",{"id":"local-registration"},"Local Registration"],["pre",{"className":"language-vue shiki shiki-themes github-light github-dark","code":"<script>\nimport vSelect from 'vue-select'\n\nexport default {\n  components: { vSelect }\n}\n</script>\n\n<template>\n  <vSelect />\n</template>\n","language":"vue","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"script"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":2},["span",{"class":"scLti"},"import"],["span",{"class":"sWKip"}," vSelect "],["span",{"class":"scLti"},"from"],["span",{"class":"sHTXl"}," 'vue-select'\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"scLti"},"export"],["span",{"class":"scLti"}," default"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"  components: { vSelect }\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"}\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"script"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":8},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"template"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"  <"],["span",{"class":"smnu3"},"vSelect"],["span",{"class":"sWKip"}," />\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"template"],["span",{"class":"sWKip"},">\n"]]]],["h3",{"id":"css"},"CSS"],["p",{},"The component itself does not include any CSS. You'll need to include it separately:"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"import 'vue-select/dist/vue-select.css';\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"import"],["span",{"class":"sHTXl"}," 'vue-select/dist/vue-select.css'"],["span",{"class":"sWKip"},";\n"]]]],["h2",{"id":"in-the-browser"},"In the Browser"],["p",{},"vue-select ships as an UMD module that is accessible in the browser. When loaded\nin the browser, you can access the component through the ",["code",{},"VueSelect.VueSelect"],"\nglobal variable. You'll need to load Vue.js, vue-select JS & vue-select CSS."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- include VueJS first -->\n<script src=\"https://unpkg.com/vue@latest\"></script>\n\n<!-- use the latest vue-select release -->\n<script src=\"https://unpkg.com/vue-select@latest\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/vue-select@latest/dist/vue-select.css\">\n\n<!-- or point to a specific vue-select release -->\n<script src=\"https://unpkg.com/vue-select@4.0.0\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/vue-select@4.0.0/dist/vue-select.css\">\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- include VueJS first -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"script"],["span",{"class":"sDUX4"}," src"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"https://unpkg.com/vue@latest\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"script"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"<!-- use the latest vue-select release -->\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"script"],["span",{"class":"sDUX4"}," src"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"https://unpkg.com/vue-select@latest\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"script"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"link"],["span",{"class":"sDUX4"}," rel"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"stylesheet\""],["span",{"class":"sDUX4"}," href"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"https://unpkg.com/vue-select@latest/dist/vue-select.css\""],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":7},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":8},["span",{"class":"sKA9v"},"<!-- or point to a specific vue-select release -->\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"script"],["span",{"class":"sDUX4"}," src"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"https://unpkg.com/vue-select@4.0.0\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"script"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"link"],["span",{"class":"sDUX4"}," rel"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"stylesheet\""],["span",{"class":"sDUX4"}," href"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"https://unpkg.com/vue-select@4.0.0/dist/vue-select.css\""],["span",{"class":"sWKip"},">\n"]]]],["p",{},"Then register the component in your javascript:"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"Vue.component('v-select', VueSelect.VueSelect);\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"Vue."],["span",{"class":"sDUX4"},"component"],["span",{"class":"sWKip"},"("],["span",{"class":"sHTXl"},"'v-select'"],["span",{"class":"sWKip"},", VueSelect.VueSelect);\n"]]]],["code-pen",{"url":"dJjzeP"},["h2",{"id":"vue-compatibility"},"Vue Compatibility"],["p",{},"You're currently reading the docs for version 4 of Vue Select, which is designed for Vue 3."],["table",{},["thead",{},["tr",{},["th",{},"Vue"],["th",{},"Vue Select"],["th",{},"Docs"]]],["tbody",{},["tr",{},["td",{},"^2.3"],["td",{},"3.0"],["td",{},["a",{"href":"https://v3.vue-select.org","rel":["nofollow"]},"https://v3.vue-select.org"]]],["tr",{},["td",{},"^3.0"],["td",{},"4.0"],["td",{},["a",{"href":"https://vue-select.org","rel":["nofollow"]},"https://vue-select.org"]]]]]],["style",{},"html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"yarn-npm","depth":2,"text":"Yarn / NPM","children":[{"id":"global-registration","depth":3,"text":"Global Registration"},{"id":"local-registration","depth":3,"text":"Local Registration"},{"id":"css","depth":3,"text":"CSS"}]},{"id":"in-the-browser","depth":2,"text":"In the Browser"},{"id":"vue-compatibility","depth":2,"text":"Vue Compatibility"}]}},"stem":"guide/install","extension":"md","meta":{},"seo":{"title":"Install","description":""}}


id: content/guide/keydown.md
checksum: 4dfc035cbc292331b115f5e0d96fd824
parsedContent:
{"id":"content/guide/keydown.md","path":"/guide/keydown","title":"Keydown","description":"","body":{"type":"minimal","value":[["h3",{"id":"customizing-keydown-behaviour"},"Customizing Keydown Behaviour"],["hr",{}],["h2",{"id":"selectonkeycodes"},"selectOnKeyCodes ",["badge",{"text":"v3.3.0+"}]],["p",{},["code",{},"selectOnKeyCodes {Array}"]," is an array of keyCodes that will trigger a typeAheadSelect. Any keyCodes\nin this array will prevent the default event action and trigger a typeahead select. By default,\nit's just ",["code",{},"[13]"]," for return. For example, maybe you want to tag on a comma keystroke:"],["tag-on-comma",{}," \n",["p",{},"<<< @/.vitepress/components/TagOnComma.vue"],["h2",{"id":"mapkeydown"},"mapKeyDown ",["badge",{"text":"v3.3.0+"}]],["p",{},"Vue Select provides the ",["code",{},"map-keydown"]," Function prop to allow for customizing the components response to\nkeydown events while the search input has focus."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"/**\n * @param map {Object} Mapped keyCode to handlers { <keyCode>:<callback> }\n * @param vm {VueSelect}\n * @return {Object}\n */\n(map, vm) => map,\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"/**\n"]],["span",{"class":"line","line":2},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," map"],["span",{"class":"sKA9v"}," {Object} Mapped keyCode to handlers { <keyCode>:<callback> }\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sWKip"}," vm"],["span",{"class":"sKA9v"}," {VueSelect}\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"}," * "],["span",{"class":"scLti"},"@return"],["span",{"class":"sDUX4"}," {Object}\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"}," */\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"("],["span",{"class":"sf26o"},"map"],["span",{"class":"sWKip"},", "],["span",{"class":"sf26o"},"vm"],["span",{"class":"sWKip"},") "],["span",{"class":"scLti"},"=>"],["span",{"class":"sWKip"}," map,\n"]]]],["p",{},"By default, the prop is a no–op returning the same object ",["code",{},"map"]," object it receives. This object\nmaps keyCodes to handlers: ",["code",{},"{ <keyCode>: <callback> }"],". Modifying this object can override default\nfunctionality, or add handlers for different keys that the component doesn't normally listen for."],["p",{},"Note that any keyCodes you've added to ",["code",{},"selectOnKeyCodes"]," will be passed to ",["code",{},"map-keydown"]," as well,\nso ",["code",{},"map-keydown"]," will always take precedence."],["p",{},["strong",{},"Default Handlers"]],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"//  delete\n8: e => this.maybeDeleteValue()\n\n//  tab\n9: e => this.onTab()\n\n//  enter\n13: e => {\n    e.preventDefault();\n    return this.typeAheadSelect();\n}\n\n//  esc\n27: e => this.onEscape()\n\n//  up\n38: e => {\n    e.preventDefault();\n    return this.typeAheadUp();\n}\n\n//  down\n40: e => {\n    e.preventDefault();\n    return this.typeAheadDown();\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"//  delete\n"]],["span",{"class":"line","line":2},["span",{"class":"swLay"},"8"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"e"],["span",{"class":"scLti"}," =>"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"maybeDeleteValue"],["span",{"class":"sWKip"},"()\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"//  tab\n"]],["span",{"class":"line","line":5},["span",{"class":"swLay"},"9"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"e"],["span",{"class":"scLti"}," =>"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"onTab"],["span",{"class":"sWKip"},"()\n"]],["span",{"class":"line","line":6},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":7},["span",{"class":"sKA9v"},"//  enter\n"]],["span",{"class":"line","line":8},["span",{"class":"swLay"},"13"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"e"],["span",{"class":"scLti"}," =>"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"    e."],["span",{"class":"sDUX4"},"preventDefault"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":10},["span",{"class":"scLti"},"    return"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"typeAheadSelect"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":11},["span",{"class":"sWKip"},"}\n"]],["span",{"class":"line","line":12},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":13},["span",{"class":"sKA9v"},"//  esc\n"]],["span",{"class":"line","line":14},["span",{"class":"swLay"},"27"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"e"],["span",{"class":"scLti"}," =>"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"onEscape"],["span",{"class":"sWKip"},"()\n"]],["span",{"class":"line","line":15},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":16},["span",{"class":"sKA9v"},"//  up\n"]],["span",{"class":"line","line":17},["span",{"class":"swLay"},"38"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"e"],["span",{"class":"scLti"}," =>"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":18},["span",{"class":"sWKip"},"    e."],["span",{"class":"sDUX4"},"preventDefault"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":19},["span",{"class":"scLti"},"    return"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"typeAheadUp"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":20},["span",{"class":"sWKip"},"}\n"]],["span",{"class":"line","line":21},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":22},["span",{"class":"sKA9v"},"//  down\n"]],["span",{"class":"line","line":23},["span",{"class":"swLay"},"40"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"e"],["span",{"class":"scLti"}," =>"],["span",{"class":"sWKip"}," {\n"]],["span",{"class":"line","line":24},["span",{"class":"sWKip"},"    e."],["span",{"class":"sDUX4"},"preventDefault"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":25},["span",{"class":"scLti"},"    return"],["span",{"class":"swLay"}," this"],["span",{"class":"sWKip"},"."],["span",{"class":"sDUX4"},"typeAheadDown"],["span",{"class":"sWKip"},"();\n"]],["span",{"class":"line","line":26},["span",{"class":"sWKip"},"}\n"]]]],["h3",{"id":"example-autocomplete-email-addresses"},"Example: Autocomplete Email Addresses"],["p",{},"This is example listens for the ",["code",{},"@"]," key, and autocompletes an email address with ",["code",{},"@gmail.com"],"."],["custom-handlers",{},["p",{},"<<< @/.vitepress/components/CustomHandlers.vue"]]],["style",{},"html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"customizing-keydown-behaviour","depth":3,"text":"Customizing Keydown Behaviour"},{"id":"selectonkeycodes","depth":2,"text":"selectOnKeyCodes "},{"id":"mapkeydown","depth":2,"text":"mapKeyDown ","children":[{"id":"example-autocomplete-email-addresses","depth":3,"text":"Example: Autocomplete Email Addresses"}]}]}},"stem":"guide/keydown","extension":"md","meta":{},"seo":{"title":"Keydown","description":""}}


id: content/guide/localization.md
checksum: 8c1b7db2ae7973ae5e6ac5f8df507a45
parsedContent:
{"id":"content/guide/localization.md","path":"/guide/localization","title":"Localization","description":"","body":{"type":"minimal","value":[["h2",{"id":"right-to-left"},"Right to Left"],["p",{},"Vue Select supports RTL using the standard HTML API using the ",["code",{},"dir"]," prop."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select dir=\"rtl\"></v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," dir"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"rtl\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["p",{},"The ",["code",{},"dir"]," prop accepts the same values as the ",["a",{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir","rel":["nofollow"]},"HTML spec"],":"],["ul",{},["li",{},["code",{},"rtl"]],["li",{},["code",{},"ltr"]],["li",{},["code",{},"auto"]]],["h2",{"id":"component-text"},"Component Text"],["p",{},"All of the text within the component has been wrapped within ",["a",{"href":"https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots","rel":["nofollow"]},"slots"]," and can be replaced in your app."],["h3",{"id":"loading-spinner"},"Loading Spinner"],["p",{},["em",{},"Slot Definition:"]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<slot name=\"spinner\">\n    <div class=\"spinner\" v-show=\"mutableLoading\">Loading...</div>\n</slot>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"slot"],["span",{"class":"sDUX4"}," name"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"spinner\""],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"    <"],["span",{"class":"smnu3"},"div"],["span",{"class":"sDUX4"}," class"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"spinner\""],["span",{"class":"sDUX4"}," v-show"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"mutableLoading\""],["span",{"class":"sWKip"},">Loading...</"],["span",{"class":"smnu3"},"div"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"slot"],["span",{"class":"sWKip"},">\n"]]]],["p",{},["em",{},"Implementation:"]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select>\n    <i slot=\"spinner\" class=\"icon icon-spinner\"></i>\n</v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"    <"],["span",{"class":"smnu3"},"i"],["span",{"class":"sDUX4"}," slot"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"spinner\""],["span",{"class":"sDUX4"}," class"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"icon icon-spinner\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"i"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["h3",{"id":"no-options-text"},"No Options Text"],["p",{},["em",{},"Slot Definition:"]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<slot name=\"no-options\">Sorry, no matching options.</slot>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"slot"],["span",{"class":"sDUX4"}," name"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"no-options\""],["span",{"class":"sWKip"},">Sorry, no matching options.</"],["span",{"class":"smnu3"},"slot"],["span",{"class":"sWKip"},">\n"]]]],["p",{},["em",{},"Implementation:"]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select>\n    <div slot=\"no-options\">No Options Here!</div>\n</v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"    <"],["span",{"class":"smnu3"},"div"],["span",{"class":"sDUX4"}," slot"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"no-options\""],["span",{"class":"sWKip"},">No Options Here!</"],["span",{"class":"smnu3"},"div"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["p",{},"For a full list of component slots, view the ",["a",{"href":"../api/slots"},"slots API docs"],"."],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"right-to-left","depth":2,"text":"Right to Left"},{"id":"component-text","depth":2,"text":"Component Text","children":[{"id":"loading-spinner","depth":3,"text":"Loading Spinner"},{"id":"no-options-text","depth":3,"text":"No Options Text"}]}]}},"stem":"guide/localization","extension":"md","meta":{},"seo":{"title":"Localization","description":""}}


id: content/guide/loops.md
checksum: efab698c66dc8c46bf9eb59207819714
parsedContent:
{"id":"content/guide/loops.md","path":"/guide/loops","title":"Loops","description":"","body":{"type":"minimal","value":[["h3",{"id":"using-vue-select-in-v-for-loops"},"Using Vue Select in v-for Loops"],["hr",{}],["p",{},"There may be times that you are including Vue Select within loops of data, such as a table. This can\npose some challenges when emitting events from the component, as you won't know which Vue Select\ninstance emitted it. This can make it difficult to wire up with things like Vuex."],["p",{},"Fortunately, you can solve this problem with an anonymous function. The example below doesn't use\nVuex just to keep things succinct, but the same solution would apply. The ",["code",{},"@input"]," is handled\nwith an inline anonymous function, allowing the selected country to be passed to the ",["code",{},"updateCountry"],"\nmethod with the ",["code",{},"country"]," and the ",["code",{},"person"]," object."],["looped-select",{},["p",{},"<<< @/.vitepress/components/LoopedSelect.vue"]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-vue-select-in-v-for-loops","depth":3,"text":"Using Vue Select in v-for Loops"}]}},"stem":"guide/loops","extension":"md","meta":{},"seo":{"title":"Loops","description":""}}


id: content/guide/mixins.md
checksum: 8a992fc44f98687ba0383bfea16c330b
parsedContent:
{"id":"content/guide/mixins.md","path":"/guide/mixins","title":"Mixins","description":"","body":{"type":"minimal","value":[],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"stem":"guide/mixins","extension":"md","meta":{},"seo":{"title":"Mixins","description":""}}


id: content/guide/opening.md
checksum: 7f41a6b367e1c69b0d0c4b4911c63080
parsedContent:
{"id":"content/guide/opening.md","path":"/guide/opening","title":"Opening","description":"","body":{"type":"minimal","value":[["h2",{"id":"default-dropdown-behaviour"},"Default Dropdown Behaviour"],["p",{},"By default, the dropdown will open anytime the underlying search input has focus. The dropdown will\nopen when clicked, or when it has received focus when tabbing through inputs."],["h2",{"id":"customizing-dropdown-behaviour"},"Customizing Dropdown Behaviour ",["badge",{"text":"v4+"}]],["p",{},"The ",["code",{},"open"]," prop can control showing and hiding the dropdown menu from a parent component. If this prop is set, the component will always use the value of ",["code",{},"props.open"]," to handle showing and hiding the dropdown. Vue Select will emit the ",["code",{},"update:open"]," when the prop value should change, so you can use ",["code",{},"<VueSelect v-model:open=\"open\" />"]," to have control over the ",["code",{},"open"]," state while preserving default behaviour."],["h4",{"id":"example-open-the-dropdown-when-search-text-is-present"},"Example: Open the dropdown when search text is present"],["hr",{}],["p",{},"In this example, we will wait to show the dropdown until the user has started typing. However, if a\ncountry has already been selected, we will display the dropdown right away."],["open-when-search-text-present",{},["p",{},"<<< @/.vitepress/components/OpenWhenSearchTextPresent.vue"]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"default-dropdown-behaviour","depth":2,"text":"Default Dropdown Behaviour"},{"id":"customizing-dropdown-behaviour","depth":2,"text":"Customizing Dropdown Behaviour "}]}},"stem":"guide/opening","extension":"md","meta":{},"seo":{"title":"Opening","description":""}}


id: content/guide/options.md
checksum: 04bd54c005c1e907beb40b83e61e50d3
parsedContent:
{"id":"content/guide/options.md","path":"/guide/options","title":"Options","description":"","body":{"type":"minimal","value":[["h2",{"id":"options-prop"},"Options Prop"],["p",{},["code",{},"vue-select"]," accepts arrays of primitive values or objects to use as options through the ",["code",{},"options"]," prop:"],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- array of strings or numbers -->\n<v-select :options=\"['Canada', 'United States']\"></v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- array of strings or numbers -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"['Canada', 'United States']\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["v-select",{":options":"['Canada', 'United States']"}],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- or, an array of objects -->\n<v-select :options=\"[{label: 'Canada', code: 'ca'}]\"></v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- or, an array of objects -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"[{label: 'Canada', code: 'ca'}]\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["v-select",{":options":"[{label: 'Canada', code: 'ca'}]"}],["h2",{"id":"option-labels"},"Option Labels"],["h4",{"id":"options-as-primitives-strings-numbers-boolean"},"Options as Primitives (strings, numbers, boolean)"],["p",{},"When ",["code",{},"options"]," contains strings or numbers, they'll be used as the label for the option within the\ncomponent. No further configuration is necessary."],["h4",{"id":"options-as-objects"},"Options as Objects"],["p",{},"When ",["code",{},"options"]," is an array of objects, the component must generate a label to be shown as the\noptions text. By default, ",["code",{},"vue-select"]," will attempt to render ",["code",{},"option.label"]," as the option label.\nYou might not have a ",["code",{},"label"]," key in your objects, so you can set your own label to match your\nsource data using the ",["code",{},"label {String}"]," prop."],["p",{},"For example, consider an object with ",["code",{},"countryCode"]," and ",["code",{},"countryName"]," properties:"],["pre",{"className":"language-json shiki shiki-themes github-light github-dark","code":"{\n  countryCode: \"CA\",\n  countryName: \"Canada\"\n}\n","language":"json","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"{\n"]],["span",{"class":"line","line":2},["span",{"class":"s5YK4"},"  countryCode"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"CA\""],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":3},["span",{"class":"s5YK4"},"  countryName"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"Canada\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"}\n"]]]],["p",{},"If you wanted to display ",["code",{},"Canada"]," in the dropdown, you'd use the ",["code",{},"countryName"]," key:"],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select label=\"countryName\" :options=\"countries\"></v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"countryName\""],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"countries\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["country-select",{},["h2",{"id":"null-empty-options"},"Null / Empty Options"],["p",{},["code",{},"vue-select"]," requires the ",["code",{},"options"]," prop to be an ",["code",{},"array"],". If you are using Vue in development\nmode, you will get warnings attempting to pass anything other than an ",["code",{},"array"]," to the ",["code",{},"options"]," prop.\nIf you need a ",["code",{},"null"],"/",["code",{},"empty"]," value, use an empty array ",["code",{},"[]"],"."]],["style",{},"html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s5YK4, html code.shiki .s5YK4{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"options-prop","depth":2,"text":"Options Prop"},{"id":"option-labels","depth":2,"text":"Option Labels"},{"id":"null-empty-options","depth":2,"text":"Null / Empty Options"}]}},"stem":"guide/options","extension":"md","meta":{},"seo":{"title":"Options","description":""}}


id: content/guide/pagination.md
checksum: b1fae5a1fd0c4b7dd71b1c861ab374d3
parsedContent:
{"id":"content/guide/pagination.md","path":"/guide/pagination","title":"Pagination","description":"::: tip \nPagination is supported using slots available with Vue Select 3.8 and above.\n:::","body":{"type":"minimal","value":[["p",{},"::: tip ",["badge",{"text":"3.8.0+"},"\nPagination is supported using slots available with Vue Select 3.8 and above.\n:::"]],["p",{},"Pagination can be a super helpful tool when working with large sets of data. If you have 1,000\noptions, the component is going to render 1,000 DOM nodes. That's a lot of nodes to insert/remove,\nand chances are your user is only interested in a few of them anyways."],["p",{},"To implement pagination with Vue Select, you can take advantage of the ",["code",{},"list-footer"]," slot. It\nappears below all other options in the drop down list."],["p",{},"To make pagination work properly with filtering, you'll have to handle it yourself in the parent.\nYou can use the ",["code",{},"filterable"]," boolean to turn off Vue Select's filtering, and then hook into the\n",["code",{},"search"]," event to use the current search query in the parent component."],["paginated",{},["p",{},"<<< @/.vitepress/components/Paginated.vue"]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"stem":"guide/pagination","extension":"md","meta":{},"seo":{"title":"Pagination","description":"::: tip \nPagination is supported using slots available with Vue Select 3.8 and above.\n:::"}}


id: content/guide/positioning.md
checksum: 14600405d5e6de4b12f5432ad25d2187
parsedContent:
{"id":"content/guide/positioning.md","path":"/guide/positioning","title":"Positioning","description":"","body":{"type":"minimal","value":[["h2",{"id":"default"},"Default"],["p",{},"With the default CSS, Vue Select uses absolute positioning to render the dropdown menu. The root\n",["code",{},".v-select"]," container (the components ",["code",{},"$el"],") is used as the ",["code",{},"relative"]," parent for the dropdown. The\ndropdown will be displayed below the ",["code",{},"$el"]," regardless of the available space."],["p",{},"This works for most cases, but you might run into issues placing into a modal or near the bottom of\nthe viewport. If you need more fine grain control, you can use calculated positioning."],["h2",{"id":"calculated"},"Calculated ",["badge",{"text":"v3.7.0+"}]],["p",{},"If you want more control over how the dropdown is rendered, or if you're running into z-index issues,\nyou may use the ",["code",{},"appendToBody"]," boolean prop. When enabled, Vue Select will append the dropdown to\nthe document, outside of the ",["code",{},".v-select"]," container, and position it with Javscript."],["p",{},"When ",["code",{},"appendToBody"]," is true, the positioning will be handled by the ",["code",{},"calculatePosition"]," prop. This\nfunction is responsible for setting top/left absolute positioning values for the dropdown. The\ndefault implementation places the dropdown in the same position that it would normally appear."],["h2",{"id":"popperjs-integration"},"Popper.js Integration ",["badge",{"text":"v3.7.0+"}]],["p",{},["a",{"href":"https://popper.js.org/","rel":["nofollow"]},"Popper.js"]," is an awesome, 3kb utility for calculating positions of just\nabout any DOM element relative to another."],["p",{},"By using the ",["code",{},"appendToBody"]," and ",["code",{},"calculatePosition"]," props, we're able to integrate directly with\npopper to calculate positioning for us."],["positioned-with-popper",{},["p",{},"Check out the ",["a",{"href":"https://popper.js.org/docs/v2/modifiers/","rel":["nofollow"]},"Popper Docs"]," to see the full ",["code",{},"modifiers"],"\nAPI being used below."],["p",{},"<<< @/.vitepress/components/PositionedWithPopper.vue{25-59}"]]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"default","depth":2,"text":"Default"},{"id":"calculated","depth":2,"text":"Calculated "},{"id":"popperjs-integration","depth":2,"text":"Popper.js Integration "}]}},"stem":"guide/positioning","extension":"md","meta":{},"seo":{"title":"Positioning","description":""}}


id: content/guide/selectable.md
checksum: b1e5e492701432fdf1040e021f02a9da
parsedContent:
{"id":"content/guide/selectable.md","path":"/guide/selectable","title":"Selectable","description":"","body":{"type":"minimal","value":[["h2",{"id":"selectable-prop"},"Selectable Prop ",["badge",{"text":"v3.3.0+"}]],["p",{},"The ",["code",{},"selectable"]," prop determines if an option is selectable or not. If ",["code",{},"selectable"]," returns false\nfor a given option, it will be displayed with a ",["code",{},"vs__dropdown-option--disabled"]," class. The option\nwill be disabled and unable to be selected."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"selectable: {\n  type: Function,\n  /**\n   * @param {Object|String} option\n   * @return {boolean}\n   */\n  default: option => true,\n},\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"selectable"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"  type"],["span",{"class":"sWKip"},": Function,\n"]],["span",{"class":"line","line":3},["span",{"class":"sKA9v"},"  /**\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"   * "],["span",{"class":"scLti"},"@param"],["span",{"class":"sDUX4"}," {Object|String}"],["span",{"class":"sWKip"}," option\n"]],["span",{"class":"line","line":5},["span",{"class":"sKA9v"},"   * "],["span",{"class":"scLti"},"@return"],["span",{"class":"sDUX4"}," {boolean}\n"]],["span",{"class":"line","line":6},["span",{"class":"sKA9v"},"   */\n"]],["span",{"class":"line","line":7},["span",{"class":"scLti"},"  default"],["span",{"class":"sWKip"},": "],["span",{"class":"sf26o"},"option"],["span",{"class":"scLti"}," =>"],["span",{"class":"swLay"}," true"],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"},\n"]]]],["h3",{"id":"example"},"Example"],["p",{},"Here ",["code",{},"selectable"]," is used to prevent books by a certain author from being chosen. In this case,\nthe options passed to the component are objects:"],["pre",{"className":"language-json shiki shiki-themes github-light github-dark","code":"{ \n    title: \"Right Ho Jeeves\", \n    author: { firstName: \"P.D\", lastName: \"Woodhouse\" }, \n}\n","language":"json","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"{ \n"]],["span",{"class":"line","line":2},["span",{"class":"s5YK4"},"    title"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"Right Ho Jeeves\""],["span",{"class":"sWKip"},", \n"]],["span",{"class":"line","line":3},["span",{"class":"s5YK4"},"    author"],["span",{"class":"sWKip"},": { "],["span",{"class":"s5YK4"},"firstName"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"P.D\""],["span",{"class":"sWKip"},", "],["span",{"class":"s5YK4"},"lastName"],["span",{"class":"sWKip"},": "],["span",{"class":"sHTXl"},"\"Woodhouse\""],["span",{"class":"sWKip"}," }, \n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"}\n"]]]],["p",{},"This object will be passed to ",["code",{},"selectable"],", so we can check if the author should be selectable or not."],["unselectable-example",{},["p",{},"<<< @/.vitepress/components/UnselectableExample.vue{6}"],["h2",{"id":"limiting-the-number-of-selections"},"Limiting the Number of Selections"],["p",{},["code",{},"selectable"]," can also be used a bit more creatively to limit the number selections that can be made\nwithin the component. In this case, the user can select any author, but may only select a maximum\nof three books."],["limit-selection-quantity",{},["p",{},"<<< @/.vitepress/components/LimitSelectionQuantity.vue{8}"]]],["style",{},"html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s5YK4, html code.shiki .s5YK4{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"selectable-prop","depth":2,"text":"Selectable Prop ","children":[{"id":"example","depth":3,"text":"Example"}]},{"id":"limiting-the-number-of-selections","depth":2,"text":"Limiting the Number of Selections"}]}},"stem":"guide/selectable","extension":"md","meta":{},"seo":{"title":"Selectable","description":""}}


id: content/guide/slots.md
checksum: 5696187c476ab819b8c10ac479578422
parsedContent:
{"id":"content/guide/slots.md","path":"/guide/slots","title":"Slots","description":"::: tip 🚧\nThis section of the guide is a work in progress! Check back soon for an update.\nVue Select currently offers quite a few scoped slots, and you can check out the\nAPI Docs for Slots in the meantime while a good guide is put together.\n:::","body":{"type":"minimal","value":[["p",{},"::: tip 🚧\nThis section of the guide is a work in progress! Check back soon for an update.\nVue Select currently offers quite a few scoped slots, and you can check out the\n",["a",{"href":"../api/slots"},"API Docs for Slots"]," in the meantime while a good guide is put together.\n:::"],["h3",{"id":"scoped-slot-option"},"Scoped Slot ",["code",{},"option"]],["p",{},"vue-select provides the scoped ",["code",{},"option"]," slot in order to create custom dropdown templates."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :options=\"options\" label=\"title\">\n  <template v-slot:option=\"option\">\n    <span :class=\"option.icon\"></span>\n    {{ option.title }}\n  </template>\n</v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"options\""],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"title\""],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"  <"],["span",{"class":"smnu3"},"template"],["span",{"class":"sDUX4"}," v-slot:option"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"option\""],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"    <"],["span",{"class":"smnu3"},"span"],["span",{"class":"sDUX4"}," :class"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"option.icon\""],["span",{"class":"sWKip"},"></"],["span",{"class":"smnu3"},"span"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"    {{ option.title }}\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"  </"],["span",{"class":"smnu3"},"template"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["p",{},"Using the ",["code",{},"option"]," slot with props ",["code",{},"\"option\""]," provides the current option variable to the template."],["code-pen",{"url":"NXBwYG","height":500},["h3",{"id":"improving-the-default-no-options-text"},"Improving the default ",["code",{},"no-options"]," text"],["p",{},"The ",["code",{},"no-options"]," slot is displayed in the dropdown when ",["code",{},"filteredOptions === 0"],". By default, it\ndisplays ",["em",{},"Sorry, no matching options"],". You can add more contextual information by using the slot\nin your own apps."],["better-no-options",{},["p",{},"<<< @/.vitepress/components/BetterNoOptions.vue"]]],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"scoped-slot-option","depth":3,"text":"Scoped Slot option"},{"id":"improving-the-default-no-options-text","depth":3,"text":"Improving the default no-options text"}]}},"stem":"guide/slots","extension":"md","meta":{},"seo":{"title":"Slots","description":"::: tip 🚧\nThis section of the guide is a work in progress! Check back soon for an update.\nVue Select currently offers quite a few scoped slots, and you can check out the\nAPI Docs for Slots in the meantime while a good guide is put together.\n:::"}}


id: content/guide/upgrading.md
checksum: 182c83cd14da4039275e13db3d143a90
parsedContent:
{"id":"content/guide/upgrading.md","path":"/guide/upgrading","title":"Upgrading","description":"","body":{"type":"minimal","value":[["h2",{"id":"index-prop-replaced-with-reduce"},["code",{},"index"]," prop replaced with ",["code",{},"reduce"]],["ul",{},["li",{},"v2.x provided the ",["code",{},"index"]," ",["code",{},"{String}"]," prop to return a single key from a selected object"],["li",{},"v3.x removes the ",["code",{},"index"]," prop, replacing it with the ",["code",{},"reduce"]," ",["code",{},"{Function}"]," prop."]],["p",{},"Using a function instead of a string provides a whole lot more flexibility, allowing for things like\ndeeply nested values, and really cleaned up the code internally."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"const options = [{country: 'Canada', code: 'CA'},];\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"const"],["span",{"class":"swLay"}," options"],["span",{"class":"scLti"}," ="],["span",{"class":"sWKip"}," [{country: "],["span",{"class":"sHTXl"},"'Canada'"],["span",{"class":"sWKip"},", code: "],["span",{"class":"sHTXl"},"'CA'"],["span",{"class":"sWKip"},"},];\n"]]]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- v2: using index --->\n<v-select :options=\"options\" label=\"country\" index=\"code\"  />\n\n<!-- v3: using reduce --->\n<v-select :options=\"options\" label=\"country\" :reduce=\"country => country.code\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- v2: using index --->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"options\""],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country\""],["span",{"class":"sDUX4"}," index"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"code\""],["span",{"class":"sWKip"},"  />\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"<!-- v3: using reduce --->\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"options\""],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country\""],["span",{"class":"sDUX4"}," :reduce"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country => country.code\""],["span",{"class":"sWKip"}," />\n"]]]],["p",{},"View the full ",["a",{"href":"values#returning-a-single-key-with-reduce"},"documentation for ",["code",{},"reduce"]],"."],["h2",{"id":"events-instead-of-callbacks"},"Events instead of Callbacks"],["p",{},"Three function callbacks have been removed in favor of using events."],["ul",{},["li",{},["code",{},"onChange"]],["li",{},["code",{},"onInput"]],["li",{},["code",{},"onSearch"]]],["p",{},"While this is a breaking change, the change in your application should be as simple as swapping the\nprop you were using for an event."],["h3",{"id":"onchange-oninput"},["code",{},"onChange"]," & ",["code",{},"onInput"]],["p",{},"In v2.x, Overwriting ",["code",{},"onChange"]," in an application was more likely to break vue-select's internals\nand cause issues. The ",["code",{},"input"]," event provides identical functionality and can be swapped out in your\napplication."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- version 2: -->\n<v-select :on-change=\"doSomething\" />\n\n<!-- version 3: -->\n<v-select @input=\"doSomething\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- version 2: -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :on-change"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"doSomething\""],["span",{"class":"sWKip"}," />\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"<!-- version 3: -->\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," @input"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"doSomething\""],["span",{"class":"sWKip"}," />\n"]]]],["p",{},"Additionally, the ",["code",{},"change"]," event has been removed. This event was redundant, ",["code",{},"input"]," should be used\ninstead."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- version 2: -->\n<v-select @change=\"doSomething\" />\n\n<!-- version 3: -->\n<v-select @input=\"doSomething\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- version 2: -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," @change"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"doSomething\""],["span",{"class":"sWKip"}," />\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"<!-- version 3: -->\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," @input"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"doSomething\""],["span",{"class":"sWKip"}," />\n"]]]],["h3",{"id":"onsearch"},["code",{},"onSearch"]],["p",{},"The ",["code",{},"onSearch"]," prop was removed for the same reason as ",["code",{},"onChange"]," and ",["code",{},"onInput"],". The ",["code",{},"search"]," event\nhas always provided the same parameters and can be used in it's place."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<!-- version 2: -->\n<v-select :on-search=\"doSomeAjax\" />\n\n<!-- version 3: -->\n<v-select @search=\"doSomeAjax\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sKA9v"},"<!-- version 2: -->\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :on-search"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"doSomeAjax\""],["span",{"class":"sWKip"}," />\n"]],["span",{"class":"line","line":3},["span",{"emptyLinePlaceholder":true},"\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"<!-- version 3: -->\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," @search"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"doSomeAjax\""],["span",{"class":"sWKip"}," />\n"]]]],["h3",{"id":"search-with-null-search-string"},["code",{},"@search"]," with null search string"],["p",{},"The ",["code",{},"@search"]," event is now fired anytime the search string changes. In v2.x, the component\nwould first check if the search string was empty, and only emit the event if it had at least one\ncharacter. This was a design mistake, as it should be the consumers decision if a search should be\nrun on an empty string."],["h2",{"id":"separated-css"},"Separated CSS"],["p",{},"CSS was removed from the JS bundle in favor of a separate CSS file to support SSR and easier\ncustomization."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"@import vSelect from 'vue-select`;\n@import 'vue-select/dist/vue-select.css';\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"@import vSelect from "],["span",{"class":"sHTXl"},"'vue-select`"],["span",{"class":"s5YK4"},";\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"@import "],["span",{"class":"sHTXl"},"'vue-select/dist/vue-select.css'"],["span",{"class":"sWKip"},";\n"]]]],["h2",{"id":"new-class-selector-prefix"},"New Class Selector Prefix"],["p",{},"In order to avoid CSS collisions and allow for low specificity overrides of CSS, all classes have\nbeen renamed to include the ",["code",{},"vs__"]," prefix. The full list of renamed classes are listed below:"],["table",{},["thead",{},["tr",{},["th",{},"original"],["th",{},"renamed"]]],["tbody",{},["tr",{},["td",{},["code",{},".open-indicator"]],["td",{},["code",{},".vs__open-indicator"]]],["tr",{},["td",{},["code",{},".dropdown-toggle"]],["td",{},["code",{},".vs__dropdown-toggle"]]],["tr",{},["td",{},["code",{},".dropdown-menu"]],["td",{},["code",{},".vs__dropdown-menu"]]],["tr",{},["td",{},["code",{},".clear"]],["td",{},["code",{},".vs__clear"]]],["tr",{},["td",{},["code",{},".selected-tag"]],["td",{},["code",{},".vs__selected"]]],["tr",{},["td",{},["code",{},".no-options"]],["td",{},["code",{},".vs__no-options"]]],["tr",{},["td",{},["code",{},".spinner"]],["td",{},["code",{},".vs__spinner"]]],["tr",{},["td",{},["code",{},".close"]],["td",{},["code",{},".vs__deselect"]]],["tr",{},["td",{},["code",{},".active"]],["td",{},["code",{},".vs__active"]]]]],["h2",{"id":"internal-state"},"Internal State"],["p",{},["strong",{},"The changes listed below are very unlikely to break your apps"]," unless you've been hooking into\nvue-select internal values. ",["a",{"href":"https://github.com/sagalbot/vue-select/pull/781","rel":["nofollow"]},"#781"],"\n(thanks ",["a",{"href":"https://github.com/owenconti","rel":["nofollow"]},"@owenconti!"],") introduced a number of optimizations to the\nway that the component handles internal state."],["ul",{},["li",{},["code",{},"value"],": the ",["code",{},"value"]," prop is undefined by default. vue-select no longer maintains an internal ",["code",{},"mutableValue"]," state when a ",["code",{},"value"]," prop has been passed. When ",["code",{},":value"]," or ",["code",{},"v-model"]," is not used, vue-select will maintain internal state using the ",["code",{},"_value"]," property."],["li",{},["code",{},"mutableOptions"]," has been removed in favor of an ",["code",{},"optionList"]," computed property."]],["h2",{"id":"misc"},"Misc"],["ul",{},["li",{},["code",{},"fade"]," transition renamed to ",["code",{},"vs__fade"]],["li",{},"Removed ",["code",{},"a"]," element that was serving as the click handler within dropdown options"]],["style",{},"html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s5YK4, html code.shiki .s5YK4{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"index-prop-replaced-with-reduce","depth":2,"text":"index prop replaced with reduce"},{"id":"events-instead-of-callbacks","depth":2,"text":"Events instead of Callbacks","children":[{"id":"onchange-oninput","depth":3,"text":"onChange & onInput"},{"id":"onsearch","depth":3,"text":"onSearch"},{"id":"search-with-null-search-string","depth":3,"text":"@search with null search string"}]},{"id":"separated-css","depth":2,"text":"Separated CSS"},{"id":"new-class-selector-prefix","depth":2,"text":"New Class Selector Prefix"},{"id":"internal-state","depth":2,"text":"Internal State"},{"id":"misc","depth":2,"text":"Misc"}]}},"stem":"guide/upgrading","extension":"md","meta":{},"seo":{"title":"Upgrading","description":""}}


id: content/guide/validation.md
checksum: 08dfe1a8087789832c493fa9373a03f1
parsedContent:
{"id":"content/guide/validation.md","path":"/guide/validation","title":"Validation","description":"","body":{"type":"minimal","value":[["h2",{"id":"required"},"Required"],["p",{},"If you need to ensure that a selection is made before a form is submitted, you can\nuse the ",["code",{},"required"]," attribute in combination with the ",["code",{},"search"]," scoped slot in order\nto do so."],["p",{},"However, the ",["code",{},"search"]," input within the component does not actually store a value, so\nsimply adding the ",["code",{},"required"]," attribute won't work. Instead, we'll bind the attribute\ndynamically, so that it's only present if we don't have a selection."],["validation-required",{},["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :options=\"books\" label=\"title\" v-model=\"selected\">\n  <template #search=\"{attributes, events}\">\n    <input\n      class=\"vs__search\"\n      :required=\"!selected\"\n      v-bind=\"attributes\"\n      v-on=\"events\"\n    />\n  </template>\n</v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"books\""],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"title\""],["span",{"class":"sDUX4"}," v-model"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"selected\""],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"  <"],["span",{"class":"smnu3"},"template"],["span",{"class":"sDUX4"}," #search"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"{attributes, events}\""],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"    <"],["span",{"class":"smnu3"},"input\n"]],["span",{"class":"line","line":4},["span",{"class":"sDUX4"},"      class"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"vs__search\"\n"]],["span",{"class":"line","line":5},["span",{"class":"sDUX4"},"      :required"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"!selected\"\n"]],["span",{"class":"line","line":6},["span",{"class":"sDUX4"},"      v-bind"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"attributes\"\n"]],["span",{"class":"line","line":7},["span",{"class":"sDUX4"},"      v-on"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"events\"\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"    />\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"  </"],["span",{"class":"smnu3"},"template"],["span",{"class":"sWKip"},">\n"]],["span",{"class":"line","line":10},["span",{"class":"sWKip"},"</"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]]],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"required","depth":2,"text":"Required"}]}},"stem":"guide/validation","extension":"md","meta":{},"seo":{"title":"Validation","description":""}}


id: content/guide/values.md
checksum: b14210ee3e825514c8cb3df16a4e560b
parsedContent:
{"id":"content/guide/values.md","path":"/guide/values","title":"Values","description":"","body":{"type":"minimal","value":[["h2",{"id":"getting-and-setting"},"Getting and Setting"],["h3",{"id":"v-model"},["code",{},"v-model"]],["p",{},"The most common use case for vue-select is to have the chosen value synced with a parent component.\nvue-select takes advantage of the ",["code",{},"v-model"]," syntax to sync values with a parent. The ",["code",{},"v-model"],"\nsyntax works with primitives and objects."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select v-model=\"selected\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," v-model"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"selected\""],["span",{"class":"sWKip"}," />\n"]]]],["p",{},"Note that when using the ",["code",{},"multiple"]," prop, the ",["code",{},"v-model"]," value will always be an array."],["h3",{"id":"props-and-events"},"Props and Events"],["p",{},"Sometimes ",["code",{},"v-model"]," might not fit your use case. For example, when working\nwith ",["a",{"href":"https://vuex.vuejs.org","rel":["nofollow"]},"Vuex"],", you'll need to trigger a mutation rather than mutating a value\ndirectly. In that case, maybe you need to bind a pre-selected value, and trigger a mutation when it\nchanges."],["p",{},"vue-select exposes the ",["code",{},"value"]," prop and an ",["code",{},"input"]," event to enable this. This combo of props and\nevents is also how Vue wires up the ",["code",{},"v-model"]," syntax internally."],["h4",{"id":"prop-value"},"Prop: ",["code",{},"value"]],["p",{},"The ",["code",{},"value"]," prop lets vue-select know what value is currently selected. It will accept strings,\nnumbers or objects. If you're using a ",["code",{},"multiple"]," v-select, you'll want to pass an array."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :value=\"selected\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :value"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"selected\""],["span",{"class":"sWKip"}," />\n"]]]],["p",{},"::: tip 🤓 Anytime you bind the ",["code",{},"value"]," prop directly, you're responsible for updating the bound\nvariable in your code using the ",["code",{},"@input"]," event.\n:::"],["h4",{"id":"event-input"},"Event: ",["code",{},"input"]],["p",{},"The ",["code",{},"input"]," event is triggered anytime the value state changes, and is emitted with the ",["code",{},"value"],"\nstate as it's only parameter."],["h4",{"id":"vuex-support"},"Vuex Support"],["p",{},"The ",["code",{},"value"]," prop and ",["code",{},"emit"]," event are very useful when using a state management tool, like Vuex. You\ncan bind the selected value with ",["code",{},":value=\"$store.myValue\""],", and use the ",["code",{},"input"]," event to trigger a\nmutation, or dispatch an action – or anything else you might need to do when the selection changes."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :value=\"$store.myValue\" @input=\"setSelected\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :value"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"$store.myValue\""],["span",{"class":"sDUX4"}," @input"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"setSelected\""],["span",{"class":"sWKip"}," />\n"]]]],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"methods: {\n    setSelected(value)\n    {\n        //  trigger a mutation, or dispatch an action  \n    }\n}\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sDUX4"},"methods"],["span",{"class":"sWKip"},": {\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    setSelected"],["span",{"class":"sWKip"},"(value)\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"    {\n"]],["span",{"class":"line","line":4},["span",{"class":"sKA9v"},"        //  trigger a mutation, or dispatch an action  \n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"}\n"]]]],["h2",{"id":"singlemultiple"},"Single/Multiple"],["p",{},"By default, vue-select supports choosing a single value. If you need multiple values, use the\n",["code",{},"multiple"]," boolean prop, much the same way you would on an HTML ",["code",{},"<select>"]," element. When ",["code",{},"multiple"],"\nis true, ",["code",{},"v-model"]," and ",["code",{},"value"]," must be an array."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select multiple v-model=\"selected\" :options=\"['Canada','United States']\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," multiple"],["span",{"class":"sDUX4"}," v-model"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"selected\""],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"['Canada','United States']\""],["span",{"class":"sWKip"}," />\n"]]]],["p",{},"::vue-select{options=",["span",{},"'Canada','United States'"],",multiple=true}"],["p",{},"::"],["h2",{"id":"transforming-selections"},"Transforming Selections"],["p",{},"When the ",["code",{},"options"]," array contains objects, vue-select returns the whole object as dropdown value\nupon selection. This approach makes no assumptions about the data you need, and provides a lot of\nflexibility. However, there will be situations where you just need to return a single key from an\nobject."],["h3",{"id":"returning-a-single-key-with-reduce"},"Returning a single key with ",["code",{},"reduce"]],["p",{},"If you need to return a single key, or transform the selection before it is synced, vue-select\nprovides a ",["code",{},"reduce"]," callback that allows you to transform a selected option before it is passed to\nthe ",["code",{},"@input"]," event. Consider this data structure:"],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"let options = [{code: 'CA', country: 'Canada'}];\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"let"],["span",{"class":"sWKip"}," options "],["span",{"class":"scLti"},"="],["span",{"class":"sWKip"}," [{code: "],["span",{"class":"sHTXl"},"'CA'"],["span",{"class":"sWKip"},", country: "],["span",{"class":"sHTXl"},"'Canada'"],["span",{"class":"sWKip"},"}];\n"]]]],["p",{},"If we want to display the ",["code",{},"country"],", but return the ",["code",{},"code"]," to ",["code",{},"v-model"],", we can use the ",["code",{},"reduce"],"\nprop to receive only the data that's required."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :options=\"options\" :reduce=\"country => country.code\" label=\"country\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"options\""],["span",{"class":"sDUX4"}," :reduce"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country => country.code\""],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country\""],["span",{"class":"sWKip"}," />\n"]]]],["h3",{"id":"deep-nested-values"},"Deep Nested Values"],["p",{},"The ",["code",{},"reduce"]," property also works well when you have a deeply nested value:"],["pre",{"className":["language-text"],"code":"{\n  country: 'canada',\n  meta: {\n    code: 'ca'\n    provinces: [...],\n  }\n}\n","language":"text"},["code",{"__ignoreMap":""},"{\n  country: 'canada',\n  meta: {\n    code: 'ca'\n    provinces: [...],\n  }\n}\n"]],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select :options=\"options\" :reduce=\"country => country.meta.code\" label=\"country\" />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"options\""],["span",{"class":"sDUX4"}," :reduce"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country => country.meta.code\""],["span",{"class":"sDUX4"}," label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"country\""],["span",{"class":"sWKip"}," />\n"]]]],["reducer-nested-value",{},["h2",{"id":"caveats-with-reduce"},"Caveats with ",["code",{},"reduce"]],["p",{},"The most common issue with ",["code",{},"reduce"]," is when the component displays your ",["em",{},"reduced"]," ",["em",{},"value"]," instead of\nit's ",["em",{},"label"],". This happens when you supply Vue Select a ",["code",{},"value"]," or ",["code",{},"v-model"]," binding with a reduced_\nvalue, but the complete option object is not present in the ",["code",{},"options"]," array."],["reduced-with-no-matching-option",{},["p",{},"<<< @/.vitepress/components/ReducedWithNoMatchingOption.vue"],["p",{},"In the example above, the component was supplied with an ID that doesn't exist in the ",["code",{},"options"],"\narray. When ",["code",{},"value"]," changes, Vue Select searches the supplied options, running each one\nthrough ",["code",{},"reduce"]," until the corresponding option is found. When that option doesn't exist, Vue Select\nwill end up displaying the ",["code",{},"value"]," supplied."],["p",{},"::: warning"],["p",{},"When providing Vue Select with a ",["em",{},"reduced"]," ",["code",{},"value"]," - the object that the value was reduced from must\nexist in the ",["code",{},"options"]," array."],["p",{},":::"],["h2",{"id":"tagging"},"Tagging"],["p",{},"To allow input that's not present within the options, set the ",["code",{},"taggable"]," prop to true."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select taggable multiple />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," taggable"],["span",{"class":"sDUX4"}," multiple"],["span",{"class":"sWKip"}," />\n"]]]],["vue-select",{"taggable":"","multiple":true},["p",{},"If you want added tags to be pushed to the options array, set ",["code",{},"push-tags"]," to true."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select taggable multiple push-tags />\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sDUX4"}," taggable"],["span",{"class":"sDUX4"}," multiple"],["span",{"class":"sDUX4"}," push-tags"],["span",{"class":"sWKip"}," />\n"]]]],["vue-select",{"taggable":"","multiple":true,"push-tags":""},["h3",{"id":"using-taggable-reduce-together"},"Using ",["code",{},"taggable"]," & ",["code",{},"reduce"]," together"],["p",{},"When combining ",["code",{},"taggable"]," with ",["code",{},"reduce"],", you must define the ",["code",{},"createOption"]," prop. The\n",["code",{},"createOption"]," function is responsible for defining the structure of the objects that Vue Select\nwill create for you when adding a tag. It should return a value that has the same properties as the\nrest of your ",["code",{},"options"],"."],["p",{},"If you don't define ",["code",{},"createOption"],", Vue Select will construct a simple object following this\nstructure:\n",["code",{},"{[this.label]: searchText}"],". If you're using ",["code",{},"reduce"],", this is probably not what your options look\nlike, which is why you'll need to set the function yourself."],["p",{},["strong",{},"Example"]],["p",{},"We have a taggable select for adding books to a collection. We're just concerned about getting the\nbook title added, and our server side code will add the author details in a background process. The\nuser has already selected a book."],["pre",{"className":"language-js shiki shiki-themes github-light github-dark","code":"const options = [\n    {\n        title: \"HTML5\",\n        author: {\n            firstName: \"Remy\",\n            lastName: \"Sharp\"\n        }\n    }\n];\n","language":"js","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"scLti"},"const"],["span",{"class":"swLay"}," options"],["span",{"class":"scLti"}," ="],["span",{"class":"sWKip"}," [\n"]],["span",{"class":"line","line":2},["span",{"class":"sWKip"},"    {\n"]],["span",{"class":"line","line":3},["span",{"class":"sWKip"},"        title: "],["span",{"class":"sHTXl"},"\"HTML5\""],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":4},["span",{"class":"sWKip"},"        author: {\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"            firstName: "],["span",{"class":"sHTXl"},"\"Remy\""],["span",{"class":"sWKip"},",\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"            lastName: "],["span",{"class":"sHTXl"},"\"Sharp\"\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"        }\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"    }\n"]],["span",{"class":"line","line":9},["span",{"class":"sWKip"},"];\n"]]]],["pre",{"className":"language-vue shiki shiki-themes github-light github-dark","code":"<v-select\n    taggable\n    multiple\n    label=\"title\"\n    :options=\"options\"\n    :create-option=\"book => ({ title: book, author: { firstName: '', lastName: '' } })\"\n    :reduce=\"book => `${book.author.firstName} ${book.author.lastName}`\"\n/>\n","language":"vue","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select\n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    taggable\n"]],["span",{"class":"line","line":3},["span",{"class":"sDUX4"},"    multiple\n"]],["span",{"class":"line","line":4},["span",{"class":"sDUX4"},"    label"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"title\"\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"    :"],["span",{"class":"sDUX4"},"options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\""],["span",{"class":"sWKip"},"options"],["span",{"class":"sHTXl"},"\"\n"]],["span",{"class":"line","line":6},["span",{"class":"sWKip"},"    :"],["span",{"class":"sDUX4"},"create-option"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\""],["span",{"class":"sf26o"},"book"],["span",{"class":"scLti"}," =>"],["span",{"class":"sWKip"}," ({ title: book, author: { firstName: "],["span",{"class":"sHTXl"},"''"],["span",{"class":"sWKip"},", lastName: "],["span",{"class":"sHTXl"},"''"],["span",{"class":"sWKip"}," } })"],["span",{"class":"sHTXl"},"\"\n"]],["span",{"class":"line","line":7},["span",{"class":"sWKip"},"    :"],["span",{"class":"sDUX4"},"reduce"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\""],["span",{"class":"sf26o"},"book"],["span",{"class":"scLti"}," =>"],["span",{"class":"sHTXl"}," `${"],["span",{"class":"sWKip"},"book"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"author"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"firstName"],["span",{"class":"sHTXl"},"} ${"],["span",{"class":"sWKip"},"book"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"author"],["span",{"class":"sHTXl"},"."],["span",{"class":"sWKip"},"lastName"],["span",{"class":"sHTXl"},"}`\"\n"]],["span",{"class":"line","line":8},["span",{"class":"sWKip"},"/>\n"]]]]]]]],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sKA9v, html code.shiki .sKA9v{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .scLti, html code.shiki .scLti{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .swLay, html code.shiki .swLay{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sf26o, html code.shiki .sf26o{--shiki-default:#E36209;--shiki-dark:#FFAB70}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"getting-and-setting","depth":2,"text":"Getting and Setting","children":[{"id":"v-model","depth":3,"text":"v-model"},{"id":"props-and-events","depth":3,"text":"Props and Events"}]},{"id":"singlemultiple","depth":2,"text":"Single/Multiple"},{"id":"transforming-selections","depth":2,"text":"Transforming Selections","children":[{"id":"returning-a-single-key-with-reduce","depth":3,"text":"Returning a single key with reduce"},{"id":"deep-nested-values","depth":3,"text":"Deep Nested Values"}]},{"id":"caveats-with-reduce","depth":2,"text":"Caveats with reduce"}]}},"stem":"guide/values","extension":"md","meta":{},"seo":{"title":"Values","description":""}}


id: content/guide/vuex.md
checksum: 40b6539a9a6dc62db182110facf65e6c
parsedContent:
{"id":"content/guide/vuex.md","path":"/guide/vuex","title":"Vuex","description":"","body":{"type":"minimal","value":[["h3",{"id":"using-the-input-event-with-vuex"},"Using the ",["code",{},"input"]," Event with Vuex"],["p",{},["code",{},"vue-select"]," emits the ",["code",{},"input"]," event any time the internal ",["code",{},"value"]," is changed.\nThis is the same event that allow the for the ",["code",{},"v-model"]," syntax. When using\nVuex for state management, you can use the ",["code",{},"input"]," event to dispatch an\naction, or trigger a mutation."],["pre",{"className":"language-html shiki shiki-themes github-light github-dark","code":"<v-select \n    @input=\"myAction\" \n    :options=\"$store.state.options\"\n    :value=\"$store.state.selected\"\n  ></v-select>\n","language":"html","meta":"","style":""},["code",{"__ignoreMap":""},["span",{"class":"line","line":1},["span",{"class":"sWKip"},"<"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"}," \n"]],["span",{"class":"line","line":2},["span",{"class":"sDUX4"},"    @input"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"myAction\""],["span",{"class":"sWKip"}," \n"]],["span",{"class":"line","line":3},["span",{"class":"sDUX4"},"    :options"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"$store.state.options\"\n"]],["span",{"class":"line","line":4},["span",{"class":"sDUX4"},"    :value"],["span",{"class":"sWKip"},"="],["span",{"class":"sHTXl"},"\"$store.state.selected\"\n"]],["span",{"class":"line","line":5},["span",{"class":"sWKip"},"  ></"],["span",{"class":"smnu3"},"v-select"],["span",{"class":"sWKip"},">\n"]]]],["code-pen",{"url":"aJQJyp","height":350}],["style",{},"html pre.shiki code .sWKip, html code.shiki .sWKip{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smnu3, html code.shiki .smnu3{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDUX4, html code.shiki .sDUX4{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sHTXl, html code.shiki .sHTXl{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-the-input-event-with-vuex","depth":3,"text":"Using the input Event with Vuex"}]}},"stem":"guide/vuex","extension":"md","meta":{},"seo":{"title":"Vuex","description":""}}


