I use vue-select for multiple values. Here is an example: https://codepen.io/sagalbot/pen/opMGro
I have the following code:
<v-select multiple v-model="selected" :options="options"></v-select>
And JS:
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
selected: ['foo','bar'],
options: ['foo','bar','baz']
}
Thank you!
You can use the v-on:input
listener to see how many items are selected.
Then pass it a simple function as:
<v-select multiple v-model="selected" :options="options" v-on:input="limiter"></v-select>
After this, create a function called limiter
in your methods and you'll get the current list of selected inputs,as
methods: {
limiter(e) {
if(e.length > 2) {
console.log(' you can only select two', e)
e.pop()
}
},
}
Now, if you add more than 2 items then the last one will be remove and you will see the console log
You can simply use inline condition:
<v-select multiple v-model="selected" :options="selected.length < 2 ? options: []">
I have limited to 2 options in the example above. The options will not be generated if there are 2 options selected. Remove the selected one and then you'll see the options dropdown.
Here's the updated demo .
you can use
:selectable="() => selected.length < 3"
from the official documentation https://vue-select.org/guide/selectable.html#limiting-the-number-of-selections
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.