Beginners guide to Dropdowns in Vue.js

Photo by Max Duzij on Unsplash

I have recently started working on Vue.js and have spent quite some time working on dropdowns. So we will be going along with different dropdowns applicable in Vue.js right from the select method to the vue-multiselect.
Disclaimer: Vue-multiselect has a wide variety of configurations available and I would highly recommend to use it in your projects.

Prerequisites

In my project I have used bootstrap and following is the installation process for the same. This will be required if you are following the first or second approach.

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap
# Main.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
# Install BootstrapVue
Vue.use(BootstrapVue)
#Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
# also import
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

1. The Select Method

Following is the code for the select method.

<div> 
 <label for="book">Choose a Book:</label> 
  <select id="book" placeholder="Select a book" 
    v-model ="selected_book">    
   <option disabled value="" selected="">Select a book</option> 
   <option :value="book.id" v-for="book in book_data" 
    :key="book.id" >{{ book.book_name }}</option> 
  </select> 
 <div class="mt-3">Selected Book: <strong>{{ genre_book }}</strong>
</div>

Following is the data-set

export default {
 name: 'BookEstore',
  data() {
   return {
     selected_book: '',
     selected_author: '',
     book_data: [{"id": 1,"book_name": "The Corrections",
                  "author": "Jonathan Franzen"},
                 {"id": 2,"book_name": "The Guest Book",
                  "author": "Sarah Blake"},
                 {"id":3,"book_name": "The Alchemist",
                  "author": "Paulo Cohelo"},
                 {"id":4,"book_name": "The Fault in Our Stars",
                   "author": "John Green"},
                 {"id":5,"book_name": "The Tattooist of Auschwitz",
                    "author": "Heather Morris"},
                 {"id":6,"book_name": "Burn After Writing",
                    "author": "Sharon Jones"}] 
    }
   }
}

2. The B-Dropdown Method

You need to import the b-formselect to use it in your project. It can be done as a plugin and as a component. I have imported it as plugin here.

//main.js
import { FormSelectPlugin } from 'bootstrap-vue'
Vue.use(FormSelectPlugin)

Following is the code:

<div>
 <label for="book">Choose a Book:</label>
 <b-form-select v-model="selected_book">
   <option disabled value="" selected="">Select a book</option>
   <option :value="book.book_name" v-for="book in book_data"     
     :key="book.book_name" >{{ book.book_name }}</option>
  </b-form-select>
  <div class="mt-3">Selected: <strong>{{ selected_book }}</strong></div>

3. The Vue-Multiselect

Vue-Multiselect is rich in documentation and covers a vast multitude of scenarios. For installation of vue-multiselect in your project, you can install it through npm or yarn.

npm install vue-multiselect --save

Further you need to import vue-multiselect to enable it’s use.

import Multiselect from 'vue-multiselect'
// register globally
Vue.component('multiselect', Multiselect)

Since the data is in the form of object henceforth use of track-by and label props is necessary. Here searchable is set to true by default therefore a separate prop is not required.

<div>
 <label class="label">Select an author</label>
 <multiselect v-model="selected_author" :options="book_data" 
   placeholder="Select author" label="author" track-by="author" >. 
 </multiselect>
</div>

Following is the data set.

import Multiselect from 'vue-multiselect'
export default {
 name: 'BookEstore',
  data() {
   return {
     selected_book: '',
     selected_author: '',
     book_data: [{"id": 1,"book_name": "The Corrections",
                  "author": "Jonathan Franzen"},
                 {"id": 2,"book_name": "The Guest Book",
                  "author": "Sarah Blake"},
                 {"id":3,"book_name": "The Alchemist",
                  "author": "Paulo Cohelo"},
                 {"id":4,"book_name": "The Fault in Our Stars",
                   "author": "John Green"},
                 {"id":5,"book_name": "The Tattooist of Auschwitz",
                    "author": "Heather Morris"},
                 {"id":6,"book_name": "Burn After Writing",
                   "author": "Sharon Jones"}]
   }
  }
}