Render Dynamic Dependant DropDowns with VUEJS 2.6.11 and BootstrapVue

Hey there, fellow Vue enthusiasts! Are you tired of struggling with dynamic dependent dropdowns in your Vue applications? Well, buckle up, because today we’re going to conquer this challenge together! In this comprehensive guide, we’ll explore how to render dynamic dependent dropdowns using VueJS 2.6.11 and BootstrapVue.

What are Dynamic Dependant DropDowns?

Before we dive into the implementation, let’s quickly define what dynamic dependent dropdowns are. In simple terms, they’re dropdown lists that dynamically change their options based on the selection made in another dropdown list. Think of it like a chained action: when you select an option in the first dropdown, the second dropdown’s options change accordingly.

Prerequisites

To follow along, make sure you have the following installed:

• VueJS 2.6.11 (or later)
• BootstrapVue (version 2.21.2 or later)
• A code editor of your choice (e.g., VS Code, Atom)

Step 1: Set Up Your Vue Project

Create a new Vue project using your preferred method (e.g., Vue CLI, manual setup). For simplicity, let’s assume you have a basic Vue project set up with the following file structure:

project
components
DropdownComponent.vue
main.js
index.html

Step 2: Install BootstrapVue

Run the following command in your terminal to install BootstrapVue:

npm install bootstrap-vue

Step 3: Create a Sample Data Set

Let’s create a sample data set to demonstrate dynamic dependent dropdowns. Add the following data to your `main.js` file:

export default {
  data() {
    return {
      countries: [
        { id: 1, name: 'USA' },
        { id: 2, name: 'Canada' },
        { id: 3, name: 'Mexico' }
      ],
      states: [
        { id: 1, name: 'California', countryId: 1 },
        { id: 2, name: 'New York', countryId: 1 },
        { id: 3, name: 'Ontario', countryId: 2 },
        { id: 4, name: 'British Columbia', countryId: 2 },
        { id: 5, name: 'Chihuahua', countryId: 3 }
      ]
    }
  }
}

Step 4: Create the Dropdown Component

Create a new file called `DropdownComponent.vue` and add the following code:

<template>
  <div>
    <b-form-group label="Country">
      <b-form-select v-model="selectedCountry" :options="countries"></b-form-select>
    </b-form-group>
    <b-form-group label="State">
      <b-form-select v-model="selectedState" :options="statesFiltered"></b-form-select>
    </b-form-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCountry: null,
      selectedState: null
    }
  },
  computed: {
    statesFiltered() {
      if (!this.selectedCountry) return [];
      return this.states.filter(state => state.countryId === this.selectedCountry);
    }
  }
}
</script>

How it Works

Let’s break down the code:

• We create two `` components, one for the country dropdown and another for the state dropdown.
• We use `v-model` to bind the selected values to the `selectedCountry` and `selectedState` data properties.
• In the `statesFiltered` computed property, we filter the `states` array based on the selected `countryId`. If no country is selected, the `statesFiltered` array will be empty.

Step 5: Use the Dropdown Component

Update your `index.html` file to include the `DropdownComponent`:

<template>
  <div>
    <DropdownComponent />
  </div>
</template>

<script>
import DropdownComponent from './components/DropdownComponent.vue'

export default {
  components: { DropdownComponent }
}
</script>

Step 6: Run the Application

Run your Vue application using your preferred method (e.g., `npm run serve`). Open your browser and navigate to `http://localhost:8080` (or the address specified in your `vue.config.js` file). You should see the dynamic dependent dropdowns in action!

Tips and Variations

Here are some additional tips and variations to enhance your dynamic dependent dropdowns:

• Use Async Data

  In a real-world scenario, you might want to fetch data from an API. You can use Vue’s built-in support for async data by wrapping your API call in a `Promise`:

  
  async mounted() {
    const response = await fetch('https://api.example.com/data')
    const data = await response.json()
    this.countries = data.countries
    this.states = data.states
  }
  
  

• Add Additional Filtering

  You can add additional filtering criteria to the `statesFiltered` computed property. For example, you could filter by another dropdown selection or a text input:

  
  statesFiltered() {
    if (!this.selectedCountry) return [];
    const filteredStates = this.states.filter(state => state.countryId === this.selectedCountry);
    if (this.selectedCity) {
      filteredStates = filteredStates.filter(state => state.cityId === this.selectedCity);
    }
    return filteredStates;
  }
  
  

• Use a Different Library

  If you prefer not to use BootstrapVue, you can use a different library like Vuetify or Element UI. The concept remains the same, but the implementation details will vary.

Conclusion

And that’s it! With these simple steps, you’ve successfully implemented dynamic dependent dropdowns using VueJS 2.6.11 and BootstrapVue. Remember to adapt this example to your specific use case and explore the many variations and enhancements possible.

Happy coding, and don’t forget to share your experiences and questions in the comments below!

Frequently Asked Question

Get ready to unleash the power of dynamic dependent dropdowns with VueJS 2.6.11 and BootstrapVue! Here are some burning questions answered to get you started: