how to make bootstrap4 collapse work in vue?



I am using bootstrap 4.3.1 and [email protected]

I have this menu (is using collapse - and I don`t want to use JQuery):

<li class="nav-item">
<a class="nav-link" href="#sidebar-products" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebar-products">
<i class="ni ni-single-copy-04 text-primary"></i>
<span class="nav-link-text">Products</span>
<div class="collapse" id="sidebar-products">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Item List 1</a>
<li class="nav-item">
<a href="#" class="nav-link">Item List 2</a>

This is only a single block that contains 2 sub-items.

What I saw using JQuery, when click on "Products" the #sidebar-products receives the .show class and aria-expanded="true".

When having multiple blocks - when click on a block to close (if there are collapsed) the others blocks.

How can I make it work the collapse with vue?


I created a click event that do the job:

<a class="nav-link" href="javascript:void(0)" @click="navItemCollapse('sidebar-products', $event)" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebar-products">

and the event:

navItemCollapse(id, event) {
let expanded ='aria-expanded').toLocaleLowerCase() == 'true' ? true : false;
let el = document.getElementById(id);
expanded ? el.classList.remove('show') : el.classList.add('show');'aria-expanded', !expanded);

But what if I have more blocks ? When click to open the current collapse on a block to close the others ???

Continue reading...