Topic: Vue - MDBAccordionItem
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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