Single/Multiple Selection
Single Option Select
<v-select :options="countries"></v-select>
Multiple Option Select
<v-select multiple :options="countries"></v-select>
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 onChange property that accepts a callback function. 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)) } }