In this example, i will show you vue multiselect laravel example. We will use laravel vue multiselect. step by step explain laravel vuejs multiselect. we will help you to give example of vue js multiselect example.
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 - HDTuto.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', 'HDTuto.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 like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example