Jeff Sagal
699d595f9a
* remove `index` in favour of `reduce`, tests passing * refactor findOptionFromReducedValue * - always use getOptionLabel in comparisons * - refactor deselect method - add missing jsdoc blocks - organize methods * bump documentation
2.2 KiB
Getting / Setting
v-model
The most common use case for vue-select is to have the chosen value synced with a parent component. vue-select
takes advantage of the v-model syntax to sync values with a parent.
<v-select v-model="selected" />
value prop & input event
If you don't require the value to be synced, but you need to preselect a value, you can use the value prop. It will
accept strings, numbers or objects. If you're using a multiple v-select, you'll want to pass an array.
<v-select :value="selected" />
The value prop is very useful when using a state management tool, like Vuex. vue-select will emit an input event
any time a value changes.
<v-select :value="selected" @input="setSelected" />
methods: {
setSelected(value) {
// do something with selected value
}
}
Transforming Selections
When the options array contains objects, vue-select returns the whole object as dropdown value upon selection.
If you need to return a single key, or transform the data before it is synced, vue-select provides a reduce callback
that allows you to transform a selected option before it is passed to the @input event. Consider this data structure:
let options = [{code: 'CA', country: 'Canada'}, ...];
If we want to display the country, but return the code to v-model, we can use the reduce prop to receive
only the data that's required.
<v-select :options="options" :reduce="country => country.code" label="country" />
The reduce property also works well when you have a deeply nested value:
{
country: 'canada',
meta: {
id: '1',
code: 'ca'
}
}
<v-select :options="options" :reduce="country => country.value.id" label="country" />
Single/Multiple Selection
By default, vue-select supports choosing a single value. If you need multiple values, use the multiple boolean prop,
much the same way you would on a native <select> element. When multiple is true, v-model or value should be
arrays.
<v-select multiple v-model="selected" :options="['foo','bar']" />