mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-16 09:10:33 +03:00
merge master, resolve upstream conflicts
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<v-select
|
||||
multiple
|
||||
placeholder="Choose up to 3 books!"
|
||||
label="title"
|
||||
v-model="selected"
|
||||
:options="books"
|
||||
:selectable="() => selected.length < 3"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import books from '../data/books';
|
||||
export default {
|
||||
data() {
|
||||
return { selected: [] }
|
||||
},
|
||||
computed: {
|
||||
books: () => books,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<v-select
|
||||
placeholder="Choose a book to read"
|
||||
label="title"
|
||||
:options="books"
|
||||
:selectable="option => ! option.author.lastName.includes('Woodhouse')"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import books from '../data/books';
|
||||
export default {
|
||||
computed: {
|
||||
books: () => books,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -118,6 +118,7 @@ module.exports = {
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/validation', 'Validation'],
|
||||
['guide/selectable', 'Limiting Selections'],
|
||||
['guide/vuex', 'Vuex'],
|
||||
['guide/ajax', 'AJAX'],
|
||||
['guide/loops', 'Using in Loops'],
|
||||
|
||||
+13
-3
@@ -339,12 +339,22 @@ createOption: {
|
||||
|
||||
## resetOnOptionsChange
|
||||
|
||||
When false, updating the options will not reset the select value
|
||||
When false, updating the options will not reset the selected value.
|
||||
|
||||
Since `v3.4+` the prop accepts either a `boolean` or `function` that returns a `boolean`.
|
||||
|
||||
If defined as a function, it will receive the params listed below.
|
||||
|
||||
```js
|
||||
/**
|
||||
* @type {Boolean|Function}
|
||||
* @param {Array} newOptions
|
||||
* @param {Array} oldOptions
|
||||
* @param {Array} selectedValue
|
||||
*/
|
||||
resetOnOptionsChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
validator: (value) => ['function', 'boolean'].includes(typeof value)
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
## Selectable Prop <Badge text="v3.3.0+" />
|
||||
|
||||
The `selectable` prop determines if an option is selectable or not. If `selectable` returns false
|
||||
for a given option, it will be displayed with a `vs__dropdown-option--disabled` class. The option
|
||||
will be disabled and unable to be selected.
|
||||
|
||||
```js
|
||||
selectable: {
|
||||
type: Function,
|
||||
/**
|
||||
* @param {Object|String} option
|
||||
* @return {boolean}
|
||||
*/
|
||||
default: option => true,
|
||||
},
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
Here `selectable` is used to prevent books by a certain author from being chosen. In this case,
|
||||
the options passed to the component are objects:
|
||||
|
||||
```json
|
||||
{
|
||||
title: "Right Ho Jeeves",
|
||||
author: { firstName: "P.D", lastName: "Woodhouse" },
|
||||
}
|
||||
```
|
||||
|
||||
This object will be passed to `selectable`, so we can check if the author should be selectable or not.
|
||||
|
||||
<UnselectableExample />
|
||||
|
||||
<<< @/.vuepress/components/UnselectableExample.vue{6}
|
||||
|
||||
## Limiting the Number of Selections
|
||||
|
||||
`selectable` can also be used a bit more creatively to limit the number selections that can be made
|
||||
within the component. In this case, the user can select any author, but may only select a maximum
|
||||
of three books.
|
||||
|
||||
<LimitSelectionQuantity />
|
||||
|
||||
<<< @/.vuepress/components/LimitSelectionQuantity.vue{8}
|
||||
Reference in New Issue
Block a user