Managing Multi-Select Dropdowns with Collapsible Sections in Vue.js: Na Here the Wahala Start!

Ah, multi-select dropdowns and collapsible sections in Vue.js, abi? E be like say e simple, but if you no manage am well, your head fit burst! If you don try am before, you go understand say, sometimes, even ordinary dropdown go turn to “who send me work?” kind of problem. But no worry, we go solve this wahala together, Naija style!

So, let’s break it down. Imagine you’re building a form input or a dashboard, and you want users to be able to choose multiple options inside dropdowns. On top of that, you want the sections to collapse and expand like those Lagos landlords when they’re negotiating rent. 😄 This blogpost go show you step-by-step how to handle this drama using Vue.js, so you go fit sleep well at night!!

1. Set Up Your Multi-Select Dropdown (No Be Small Thing O!).

First, we’d create a basic Vue component. For this, I’d use the <multiselect> component from vue-multiselect because e dey sweet and easy to work with.

1. Install the Package:

npm install vue-multiselect

2. Set Up the Component:

   Create a Vue component eg: DropdownSection.vue:

    <template>
      <div class="dropdown-section">
        <multiselect
          v-model="selectedOptions"
          :options="options"
          :multiple="true"
          placeholder="Pick your options o!"
          label="name"
          track-by="id"
        />
        <button @click="toggleSection">
          {{ isOpen ? 'Close Section' : 'Open Section' }}
        </button>
        <div v-if="isOpen" class="section-content">
          <h4>Selected Options</h4>
          <ul>
            <li v-for="option in selectedOptions" :key="option.id">{{ option.name }}</li>
          </ul>
        </div>
      </div>
    </template>
   

   Component Breakdown:

   • v-model="selectedOptions": E be like your main guy for keeping track of selected options.

   • :multiple="true": Allow users to select more than one option.

   • toggleSection button: Na this one go open and close the collapsible section like magic!

3. Script Section (Make Your JavaScript Sharp!):

    <script>
    import Multiselect from "vue-multiselect";
    export default {
      components: { Multiselect },
      data() {
        return {
          selectedOptions: [],
          options: [
            { id: 1, name: "React" },
            { id: 2, name: "Vue" },
            { id: 3, name: "Angular" },
            { id: 4, name: "Svelte" },
          ],
          isOpen: false,
        };
      },
      methods: {
        toggleSection() {
          this.isOpen = !this.isOpen;
        },
      },
    };
    </script>
   

   Na the main action be this! With the toggleSection function, you fit switch between opening and closing the section with just a click. Na just simple Boolean magic! 🔮

Add Some Style (Because Swagger No Dey Finish):

<style scoped>
.dropdown-section {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f7f7f7;
}
.section-content {
  margin-top: 15px;
  padding: 10px;
  border-top: 1px solid #ccc;
}
</style>

2. Now Make Everything Dey Collapse and Expand – No Be Juju Be That?

So, the trick here na to add a small animation so when the sections collapse, e go look smooth like Naija jollof rice wey dem serve for correct wedding. You fit use simple CSS transitions for this:

.section-content {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

The magic word here na overflow: hidden;. This one go hide anything wey dey outside the section when e collapse. So even if person add ten thousand items, e go still remain coded until e expand!

3. Connect the Multi-Select Options to the Collapsible Sections (Make Dem Collaborate)

Now, e no go make sense if the options you select no control wetin dey show inside your section. Wetin be the point? Here, we go dynamically update the content of the collapsible section based on the selected items. Modify the v-for directive in the section-content like this:

<ul>
  <li v-for="option in selectedOptions" :key="option.id">{{ option.name }}</li>
</ul>

With this setup, every time you select (or deselect) items inside the multi-select dropdown, the content of the section go update sharp sharp!

Final Thoughts – E Easy, Abi?

Managing multi-select dropdowns with collapsible sections can be like driving through Lagos traffic on a Monday morning. If you know wetin you dey do, you go reach where you dey go, but if you miss one turn, e fit carry you go another place! But with this guide, you no fit waka pass traffic.

Feel free to tweak the components, play around with animations, and if you want to add more wahala (like nested collapsible sections), go ahead! Your users go think say na magic you dey do.

Until next time, keep coding, and no let Vue.js stress you pass like that o! 😉