Vue JS MultiSelect Dropdown Example

By Hardik Savani | May 4, 2019 | | 5234 Viewer | Category : Vue.JS


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...



***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: