The resulting vue-select, and it's value:
-<v-select :options="countries"></v-select>
-<v-select multiple :options="countries"></v-select>
When the list of options provided by the parent changes, vue-select will react as you'd expect.
-The most common use case for vue-select is being able to sync the components value with a parent component. The value property supports two-way data binding to accomplish this.
The .sync data-binding modifier is completely optional. You may use value without a two-way binding to preselect options.
Here we have preselected 'Canada' by setting syncedVal: 'Canada' on the parent component. The buttons below demonstrate how you can set the value from the parent.
Current value:
-<v-select :value.sync="syncedVal" :options="countries"></v-select>
By default when the options array contains objects, vue-select looks for the label key for display. If your data source doesn't contain that key, you can set your own using the label prop.
On this page, the list of countries used in the examples contains value and label properties:
-<v-select label="value" :options="countries"></v-select>
vue-select provides an change event. This function is passed the currently selected value(s) as it's only parameter.
This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.
- --<v-select :on-change="consoleCallback" :options="countries"></v-select>
-methods: { - consoleCallback(val) { - console.dir(JSON.stringify(val)) - }, - - alertCallback(val) { - alert(JSON.stringify(val)) - } -}
{{ repo.description }}
-props: {
-
- /**
- * Contains the currently selected value. Very similar to a
- * `value` attribute on an . You can listen for changes
- * using 'change' event using v-on
- * @type {Object||String||null}
- */
- value: {
- default: null
- },
-
- /**
- * An array of strings or objects to be used as dropdown choices.
- * If you are using an array of objects, vue-select will look for
- * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
- * custom label key can be set with the `label` prop.
- * @type {Array}
- */
- options: {
- type: Array,
- default() { return [] },
- },
-
- /**
- * Enable/disable filtering the options.
- * @type {Boolean}
- */
- searchable: {
- type: Boolean,
- default: true
- },
-
- /**
- * Equivalent to the `multiple` attribute on a `<select>` input.
- * @type {Boolean}
- */
- multiple: {
- type: Boolean,
- default: false
- },
-
- /**
- * Equivalent to the `placeholder` attribute on an `<input>`.
- * @type {String}
- */
- placeholder: {
- type: String,
- default: ''
- },
-
- /**
- * Sets a Vue transition property on the `.dropdown-menu`. vue-select
- * does not include CSS for transitions, you'll need to add them yourself.
- * @type {String}
- */
- transition: {
- type: String,
- default: 'expand'
- },
-
- /**
- * Enables/disables clearing the search text when an option is selected.
- * @type {Boolean}
- */
- clearSearchOnSelect: {
- type: Boolean,
- default: true
- },
-
- /**
- * Close a dropdown when an option is chosen. Set to false to keep the dropdown
- * open (useful when combined with multi-select, for example)
- * @type {Boolean}
- */
- closeOnSelect: {
- type: Boolean,
- default: true
- },
-
- /**
- * Tells vue-select what key to use when generating option labels when
- * `option` is an object.
- * @type {String}
- */
- label: {
- type: String,
- default: 'label'
- },
-
- /**
- * An optional callback function that is called each time the selected
- * value(s) change. When integrating with Vuex, use this callback to trigger
- * an action, rather than using :value.sync to retreive the selected value.
- * @type {Function}
- * @default {null}
- */
- onChange: {
- type: Function,
- default: function (val) {
- this.$emit('input', val)
- }
- },
-
- /**
- * Sets the id of the input element.
- * @type {String}
- * @default {null}
- */
- inputId: {
- type: String
- }
-
- }
-
- The onSearch prop allows you to load options via ajax in a parent component
- when the search text is updated. It is invoked with two parameters, search & loading.
-
- search is a string containing the current search text.
- loading is a function that accepts a boolean value,
- and is used to toggle the 'loading' class on the top-level vue-select wrapper.
-
- Vue Select includes a default loading spinner that appears when the loading class is present.
- The spinner slot allows you to implement your own spinner.
-
-
-
- Vue Select also accepts a debounce prop that can be used to prevent
- onSearch from being called until input has completed.
-
- Since Vue.js does not ship with ajax functionality as part of the core library, - it's up to you to process the ajax requests in your parent component. -
-In this example, - Vue Resource is used to access the - GitHub API. -
- --<v-select - :debounce="250" - :on-search="getOptions" - :options="options" - placeholder="Search GitHub Repositories..." - label="full_name" -> -</v-select>
- - - \ No newline at end of file diff --git a/docs/components/snippets/AjaxProps.vue b/docs/components/snippets/AjaxProps.vue deleted file mode 100644 index be20eff..0000000 --- a/docs/components/snippets/AjaxProps.vue +++ /dev/null @@ -1,28 +0,0 @@ - -data() { - return { - options: null - } -}, -methods: { - getOptions(search, loading) { - loading(true) - this.$http.get('https://api.github.com/search/repositories', { - q: search - }).then(resp => { - this.options = resp.data.items - loading(false) - }) - } -} -
- - - \ No newline at end of file diff --git a/docs/components/snippets/InstallSnippet.vue b/docs/components/snippets/InstallSnippet.vue deleted file mode 100644 index 945dfd2..0000000 --- a/docs/components/snippets/InstallSnippet.vue +++ /dev/null @@ -1,41 +0,0 @@ - -/** - * Accept a callback function that will be run - * when the search text changes. The callback - * will be invoked with these parameters: - - * @param {search} String Current search text - * @param {loading} Function(bool) Toggle loading class - */ -onSearch: { - type: Function, - default: false -}, - -/** - * Milliseconds to wait before invoking this.onSearch(). - * Used to prevent sending an AJAX request until input - * has completed. - */ -debounce: { - type: Number, - default: 0 -}
Install from GitHub via NPM
-- -npm install vue-select
To use the vue-select component in your templates, simply import it, and register it with your component.
--<template> - <div id="myApp"> - <v-select :value.sync="selected" :options="options"></v-select> - </div> -</template> -<script> -import vSelect from "vue-select" - export default { - components: {vSelect}, - - data() { - return { - selected: null, - options: ['foo','bar','baz'] - } - } - } -</script> -
- 
- 
- 
- 
- 
-
A native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.
- -