Vue - MDBAccordionItem


Topic: Vue - MDBAccordionItem

Larsen pro premium priority asked 3 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.

Thanks.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/docs/b5/vue/components/accordion/#docsTabsOverview


Mikołaj Smoleński staff answered 3 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.

https://mdbootstrap.com/snippets/vue/mikolaj-smolenski/3654702

Keep coding,  Mikołaj from MDB


Larsen pro premium priority answered 3 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.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • 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