How To Limit Selected Items In Vue-select?

I use vue-select for multiple values. Here is an example: https://codepen.io/sagalbot/pen/opMGro I have the following code: Copy

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

Solution 2:

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.

Solution 3:

you can use

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

from the official documentation https://vue-select.org/guide/selectable.html#limiting-the-number-of-selections