Vue Select — Complex Dropdowns and Validation

Photo by David Becker on Unsplash

To make dropdowns easier, we can use the Vue Select plugin to add the dropdown.

It can do much more than the select element.

In this article, we’ll look at how to use the vue-select package to make more complex dropdowns.

Single/Multiple Selection

We can enable multiple selection the v-select component with the multiple prop:

<template>
  <div id="app">
    <v-select multiple v-model="selected" :options="['Canada','United States']"/>
    {{selected}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: ""
    };
  }
};
</script>

Now we can type in the results and select more than one choice.

Tagging

We can add the taggable prop to add choices that aren’t present in the dropdown.

For example, we can write:

<template>
  <div id="app">
    <v-select taggable multiple v-model="selected" :options="['Canada','United States']"/>
    {{selected}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: ""
    };
  }
};
</script>

Now we can type in anything and it’ll be selected.