Topic: Vue - MDBAccordionItem

Larsen priority asked 2 years ago

Expected behavior

Actual behavior Vue Rookie Question:

Given the Basic example in the documentation, the ref ActiveItem is set to the v-model os the accordion. Is it possible to modify the ActiveItem (.value?) to programmatically open another Item without having to apply classes through the DOM.

I've tried to set ActiveItem and ActiveItem.value to collapseTwo, but the model does not seem to trigger events after this update.


Resources (screenshots, code snippets etc.)

Mikołaj Smoleński staff answered 2 years ago

Here's the snippet code with an example of dynamic accordion update. You just need to change the activeItem.value to the collapseId of any item.

Keep coding,  Mikołaj from MDB

Larsen priority answered 2 years ago

Hi Mikolaj,

Thanks for the example, I got it working by removing the StayOpen property on the Accordion. My intention was to have the first Item to stay open, when an element inside of that triggering a mutation of the activeItem.value would open collapseTwo but keep collapseOne open.

Thanks for the support.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.9.0
  • Device: MacBook Air
  • Browser: Firefox
  • OS: MacOs 12.1
  • Provided sample code: No
  • Provided link: Yes