如何在vue-select中限制selected项?
How to limit selected items in vue-select?
我对多个值使用 vue-select。
这是一个例子:https://codepen.io/sagalbot/pen/opMGro
我有以下代码:
<v-select multiple v-model="selected" :options="options"></v-select>
和 JS:
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
selected: ['foo','bar'],
options: ['foo','bar','baz']
}
谢谢!
您可以使用 v-on:input
侦听器查看选择了多少项。
然后将一个简单的函数传递给它:
<v-select multiple v-model="selected" :options="options" v-on:input="limiter"></v-select>
在此之后,在您的方法中创建一个名为 limiter
的函数,您将获得当前选定输入的列表,如
methods: {
limiter(e) {
if(e.length > 2) {
console.log(' you can only select two', e)
e.pop()
}
},
}
现在,如果您添加超过 2 个项目,那么最后一个将被删除,您将看到控制台日志
您可以简单地使用内联条件:
<v-select multiple v-model="selected" :options="selected.length < 2 ? options: []">
我在上面的例子中限制了 2 个选项。如果选择了 2 个选项,则不会生成选项。删除所选的一个,然后您将看到选项下拉列表。
这是更新后的 demo。
你可以使用
:selectable="() => selected.length < 3"
来自官方文档https://vue-select.org/guide/selectable.html#limiting-the-number-of-selections
我对多个值使用 vue-select。 这是一个例子:https://codepen.io/sagalbot/pen/opMGro
我有以下代码:
<v-select multiple v-model="selected" :options="options"></v-select>
和 JS:
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
selected: ['foo','bar'],
options: ['foo','bar','baz']
}
谢谢!
您可以使用 v-on:input
侦听器查看选择了多少项。
然后将一个简单的函数传递给它:
<v-select multiple v-model="selected" :options="options" v-on:input="limiter"></v-select>
在此之后,在您的方法中创建一个名为 limiter
的函数,您将获得当前选定输入的列表,如
methods: {
limiter(e) {
if(e.length > 2) {
console.log(' you can only select two', e)
e.pop()
}
},
}
现在,如果您添加超过 2 个项目,那么最后一个将被删除,您将看到控制台日志
您可以简单地使用内联条件:
<v-select multiple v-model="selected" :options="selected.length < 2 ? options: []">
我在上面的例子中限制了 2 个选项。如果选择了 2 个选项,则不会生成选项。删除所选的一个,然后您将看到选项下拉列表。
这是更新后的 demo。
你可以使用
:selectable="() => selected.length < 3"
来自官方文档https://vue-select.org/guide/selectable.html#limiting-the-number-of-selections