Multiple selection is often a feature added to web apps to let users select multiple items at once.

Vue apps can use the Vue-Multiselect library to add this feature.

In this article, we’ll look at how to use this package to add a multi-select drop down.

Basic Single Select

We can get started by writing the following code:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
    />
  </head>
  <body>
    <div id="app">
      <vue-multiselect v-model="value" :options="options"></vue-multiselect>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

Vue.component("vue-multiselect", window.VueMultiselect.default);

new Vue({
  el: "#app",
  data: {
    value: "",
    options: ["apple", "orange", "grape"]
  }
});

In the code above, we added the Vue-Multiselect library with the following script and link tags in index.html:

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

for the code and styles respectively.

Then we registered the component with:

Vue.component("vue-multiselect", window.VueMultiselect.default);

Then we added the options for our dropdown choices:

options: ["apple", "orange", "grape"]

Finally, in our template, we added:

<vue-multiselect v-model="value" :options="options"></vue-multiselect>

After that, we should see a drop down showning on the screen with those choices listed in the options.

Single Select with Objects

In the code above, we have an array of strings, but we can also use an
array of objects as options.

We just have to change our example above slightly to let user select objects:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
    />
  </head>
  <body>
    <div id="app">
      <vue-multiselect
        track-by="name"
        label="name"
        v-model="value"
        :options="options"
      ></vue-multiselect>
      <p>{{value}}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

Vue.component("vue-multiselect", window.VueMultiselect.default);

new Vue({
  el: "#app",
  data: {
    value: "",
    options: [
      { name: "Vue.js", language: "JavaScript" },
      { name: "Rails", language: "Ruby" },
      { name: "Sinatra", language: "Ruby" }
    ]
  }
});

In the code above, we added the track-by1 andlabelprops to enable the library to track changes in object by itsname` property.

Multiple Select

All we have to do to enable multiple selection is to set the multiple prop to true.

We just have to revise the example above by changing index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
    />
  </head>
  <body>
    <div id="app">
      <vue-multiselect
        track-by="name"
        label="name"
        v-model="value"
        :options="options"
        :multiple="true"
      ></vue-multiselect>
      <p>{{value}}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Then we’ll see the values that are selected in the p tag.

Async Selection

The options doesn’t have to be set synchronously. We can also populate it with data from an async source as in the following example:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
    />
  </head>
  <body>
    <div id="app">
      <vue-multiselect
        track-by="name"
        label="name"
        v-model="value"
        :options="options"
        :multiple="true"
      ></vue-multiselect>
      <p>{{value}}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

Vue.component("vue-multiselect", window.VueMultiselect.default);

new Vue({
  el: "#app",
  data: {
    value: "",
    options: []
  },
  async beforeMount() {
    this.options = await Promise.resolve([
      { name: "Vue.js", language: "JavaScript" },
      { name: "Rails", language: "Ruby" },
      { name: "Sinatra", language: "Ruby" }
    ]);
  }
});

The code above populates the options from the resolved value of a promise, but we don’t have to make any changes to the template code.

Conclusion

The Vue-Multiselect lets us create a dropdown that works in various ways like single select, multiselect, and displaying a searchable drop down.

It can take options from synchronous and asynchronous sources.

Post Views: 10

Add Multiple Selection Drop Down with Vue-Multiselect

Basic Single Select

Single Select with Objects

Multiple Select

Async Selection

Conclusion