Create a Dropdown with Vue-MultiSelect

A dropdown is often something we want to add in Vue apps.

To make our lives easier, we can use a component library to add it.

In this article, we’ll look at how to create a dropdown with Vue-MultiSelect

Getting Started

We can install Vuetify by running:

npm install vue-multiselect --save

Then we can use it by writing:

import Vue from "vue";
import App from "./App.vue";
import Multiselect from "vue-multiselect";
Vue.component("multiselect", Multiselect);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

in main.js .

We add the following to our index.html file:

<link
  rel="stylesheet"
  href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
/>

Then we can use it in App.vue by writing:

<template>
  <div id="app">
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: ["foo", "bar", "baz"]
    };
  }
};
</script>

We registered the multiselect component globally with:

import Multiselect from "vue-multiselect";
Vue.component("multiselect", Multiselect);

Therefore, we can use it anywhere.

The options prop takes an array of options.

v-model binds to the selected value.

Now we should see a dropdown with the options listed in options .

Other props include searchables , which lets us type in something to search for it.

placeholder lets us add a placeholder.

close-on-select lets us choose whether the menu closes when an item is selected.

allow-empty indicates whether we want to let users deselect a value of it’s selected.

deselect-label lets us add a message to display if a user tries to deselect an item.

We can write:

<template>
  <div id="app">
    <multiselect v-model="value" deselect-label="Can't remove this value" :options="options"></multiselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: ["foo", "bar", "baz"]
    };
  }
};
</script>

to add the deselect-label option.

Select with Search

We can let users select an item by typing with the searchable prop.

We can add a custom-label prop to lets us pass in a function return a string to display a custom label.

For example, we can write:

<template>
  <div id="app">
    <multiselect v-model="value" searchable :custom-label="nameWithLang" :options="options"></multiselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { name: "Vue.js", language: "JavaScript" },
        { name: "React", language: "JavaScript" },
        { name: "Rails", language: "Ruby" }
      ]
    };
  },
  methods: {
    nameWithLang({ name, language }) {
      return `${name} — ${language}`;
    }
  }
};
</script>

We have the searchable prop so users can select by typing.

And we have the custom-label prop set to the nameWithLang as the value.

So that’ll be displayed as the value.

Multiple Select

We can enable multiple selections with the multiple prop.

For example, we can write:

<template>
  <div id="app">
    <multiselect v-model="value" multiple :custom-label="nameWithLang" :options="options"></multiselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { name: "Vue.js", language: "JavaScript" },
        { name: "React", language: "JavaScript" },
        { name: "Rails", language: "Ruby" }
      ]
    };
  },
  methods: {
    nameWithLang({ name, language }) {
      return `${name} — ${language}`;
    }
  }
};
</script>

Then we can select multiple items from the list.

We can populate the tag slot with our own content for the dropdown items.

For instance, we can write:

<template>
  <div id="app">
    <multiselect v-model="value" multiple :options="options">
      <template slot="selection" slot-scope="{ values, search, isOpen }">
        <span
          v-if="values.length && !isOpen"
        >{{ values.length }} options selected</span>
      </template>
    </multiselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: ["Vue.js", "React", "Rails"]
    };
  }
};
</script>

Then we’ll see the number of options we selected.

values has the selected values.

Asynchronous Select

Dropdown options can be loaded asynchronously.

To do that, we can add the loading prop to indicate when it’s loading.

options-limit lets us set the maximum number of options.

limit lets us limit the number of visible results.

internal-search enables or disables the library’s internal search engine.

hide-selected lets us display the items or not.

For example, we can write:

<template>
  <div id="app">
    <multiselect v-model="value" :limit="2" :loading="loading" :options="options"></multiselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: []
    };
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {
      this.options = ["Vue.js", "React", "Rails"];
      this.loading = false;
    }, 100);
  }
};
</script>

Then we set the loading prop to indicate that the items are being loaded.

Conclusion

We can create a dropdown easily with Vue-Multiselect.

All we have to do is to add the plugin and use the built-in component.