Nested Select menu dropdown using Vue-multiselect

We will be creating nested select dropdown in vue using the Vue-multiselect package.

Vue-Multiselect is a popular open source package that gives us more control over the normal <Select> <options> in the Html.
In the article we will explore how to use the package

I have attached a live example at the end of the article. If you like to skip the reading and get straight into action. Please go ahead..

#1 Preping the workspace

Installation
I will be using the npm installation,

npm install vue-multiselect --save

Once installed successfully, import it,
For this article I am importing it to the specific component, by doing this we could limit the package load time to this specific component.

#2 Usage

Vue template

<template>
         <div>
           <div class="form-group row">
                  <label for="stateCode" class="col-sm-2 col-form-label"
                    >State</label
                  >
                  <div class="col-sm-10">
                    <div class="fx-relay-email-input-wrapper">
                      <multiselect
                        v-model="stateValue"
                        :options="options"
                        label="state_name"
                        :searchable="false"
                        :close-on-select="true"
                        :show-labels="false"
                        placeholder="Pick a value"
                      >
                        <span slot="noResult"
                          >Oops! No elements found. Consider changing the search
                          query.</span
                        >
                      </multiselect>
                    </div>
                  </div>
                </div>

                <div class="form-group row">
                  <label for="stateCode" class="col-sm-2 col-form-label"
                    >District</label
                  >
                  <div class="col-sm-10">
                    <div class="fx-relay-email-input-wrapper">
                      <multiselect
                        v-model="districtValue"
                        :options="districts"
                        :multiple="true"
                        :close-on-select="false"
                        :clear-on-select="false"
                        :preserve-search="true"
                        placeholder="Pick some"
                        label="district_name"
                        track-by="district_name"
                        :preselect-first="true"
                      >
                        <span slot="noResult"
                          >Oops! No elements found. Consider changing the search
                          query.</span
                        >
                        <template
                          slot="selection"
                          slot-scope="{ values, search, isOpen }"
                          ><span
                            class="multiselect__single"
                            v-if="values.length &amp;&amp; !isOpen"
                            >{{ values.length }} options selected</span
                          ></template
                        >
                      </multiselect>
                      <!-- <pre class="language-json"><code>{{ value  }}</code></pre> -->
                    </div>
                  </div>
                </div>
          </div>
</template>

Vue script

<script>
  import Multiselect from 'vue-multiselect'

  export default {
  props: [ "stateData"], 
    components: { Multiselect },
    data () {
      return {
        districtValue: null, //Selected Districts appended 
        stateValue: null, //Selected State appended
        districts: [], //assign the districts on state selection
      }
    },
//We are using the watch to monitor the changes to the selection of the vue-multiselect. 
  watch: {
    stateValue: function (val) {
      this.districts = val.districts;
    },
  },
  computed: {
    options: function () {
      return JSON.parse(this.stateData);
    },
  },
  methods: {
//Clear the selection when parent is updated
    ClearDistrict() {
      this.districtValue = [];
    },
  }
</script>

<!-- New step!
     Add Multiselect CSS. Can be added as a static asset or inside a component. -->

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Live example,

If you have face any doubts, dont forget to ping us on Tesmachino Website

JSON

Find the json the INDIAN STATES DISTRICTS DATA JSON in below Github gist:

https://gist.github.com/mightyteja/2ea9c094b8ca006f1f5579ff14e60919