如何限制 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()
      }
    },
  }

現在，如果您添加了 2 個以上的項目，那么最后一個將被刪除，您將看到控制台日志

Answer 2

您可以簡單地使用內聯條件：

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

在上面的示例中，我僅限於 2 個選項。 如果選擇了 2 個選項，則不會生成這些選項。 刪除選定的一個，然后您將看到選項下拉列表。

這是更新的演示。

Answer 3

你可以使用

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