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

Question

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

谢谢！

Answer 1

您可以使用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()
      }
    },
  }

现在，如果您添加两个以上的项目，那么最后一个将被删除，您将看到控制台日志

这是一个工作示例：https : //codepen.io/samayo/pen/QmLwQV