ItSolutionStuff.com

we will learn how to use multiselect dropdown box component in vue js. we can easily use vue multiselect dropdown in laravel application too. we will use vue-multiselect npm package for bootstrap vue multiple select dropdown like select tag in vue.js.

vue-multiselect package provide several options to multiselect box like :searchable, :multiple, :options, :close-on-select, :show-labels etc. vue-multiselect package amazing to use that layout is nice.

You can follow step by step commands to use multiple select dropdown box in vue js. so let's follow:

Step 1: Create Vue App

first we need to create vue cli app using bellow command:

vue create myapp

Step 2: Install vue-multiselect Package

Here we need to install vue-multiselect npm package that will allow to make http request.

npm install vue-multiselect

Step 3: Updated HelloWorld Component

Here, we will create HelloWorld.vue component with following code.

src/components/HelloWorld.vue

<template>
  <div>
    <h1>Vue JS MultiSelect Dropdown Example - ItSolutionStuff.com</h1>
    <multiselect
      v-model="selected"
      :multiple="true"
      :options="options">
    </multiselect>
  </div>
</template>
     
<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        selected: null,
        options: ['Laravel', 'Laravel 5', 'Vue JS', 'ItSolutionStuff.com', 'HDTuto.com']
      }
    }
  }
</script>
     
<style src="vue-multiselect/dist/vue-multiselect.min.css">

Now you can run vue app by using following command:

npm run serve

You can see officially docs from here: vue-multiselect.js.org.

I hope it can help you...