Vue Select — Complex Dropdowns and Validation

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.

Also, we can add the push-tags prop to push the option to the options array:

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

Now when we type in something, we’ll see it in the dropdown.

Even though it’s in the dropdown, it’s not added to the options array.

Using taggable & reduce Together

We can use the taggable and reduce props together if we add the create-option prop.

For example, we can write:

<template>
  <div id="app">
    <v-select
      taggable
      multiple
      label="title"
      :options="options"
      v-model="selected"
      :create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
      :reduce="book => `${book.author.firstName} ${book.author.lastName}`"
    />
    <div>{{selected}}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: undefined,
      options: [
        {
          title: "HTML for dummies",
          author: {
            firstName: "james",
            lastName: "smith"
          }
        },
        {
          title: "JavaScript for dummies",
          author: {
            firstName: "mary",
            lastName: "smith"
          }
        }
      ]
    };
  }
};
</script>

We have the create-option prop to return the object that we want to add to the dropdown as additional choices.

The reduce prop has a function that determines what’s added to the selected array.

Validation

v-select supports validation.

For example, we can add:

<template>
  <div id="app">
    <v-select :options="options" label="title" v-model="selected">
      <template #search="{attributes, events}">
        <input :required="!selected" v-bind="attributes" v-on="events">
      </template>
    </v-select>
    <div>{{selected}}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: undefined,
      options: ["Canada", "United States"]
    };
  }
};
</script>

to add the required prop to the input for searching for items.

We put our customs search box in the sesrch slot.

And we pass all the attributes and events to the input element.

Conclusion

We can enable multiple selection and add validation to a dropdown with the Vue Select package.