javascript - 如何限制vue-select中的选定项目？

Question

我有以下代码：

<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']
  }

谢谢！

score 10 · Accepted Answer

您可以使用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 个项目，那么最后一个项目将被删除，您将看到控制台日志

score 4 · Accepted Answer

您可以简单地使用内联条件：

<v-select multiple v-model="selected" :options="selected.length < 2 ? options: []">

在上面的示例中，我限制了 2 个选项。如果选择了 2 个选项，则不会生成选项。删除选定的一个，然后您将看到选项下拉列表。

这是更新的演示。

score 0 · Accepted Answer

您可以使用

:selectable="() => selected.length < 3"

3 回答 3