How to Programmatically Control Accordion Open/Close State with External Props?

[bjorne84]

Hello,

I'm working with the Accordion component from the Shadcn library in a Vue 3 project and I'm trying to find a way to programmatically open and close accordion sections from an external function or by setting a prop. My goal is to control the accordion based on the state changes in another part of my application, such as checkbox selections.

Current Setup:
I have multiple accordion items that are rendered dynamically from a list of objects. Each object has a property that determines if the corresponding accordion section should be open or closed. I am currently toggling the state based on user interactions within the component itself, but I need to extend this to react to changes made outside of the accordion component.

Is there a recommended way to control the accordion's open/close state externally through props or an API method? I've tried directly setting a reactive property bound to the value of the Accordion, but it doesn't seem to trigger the accordion state changes as expected.

[sadeghbarati]

https://stackblitz.com/edit/dp1hww?file=src%2FApp.vue

You can use Checkbox @update:checked emit to control Accrodion component (controlled component)
If Checkbox and Accordion are not in the same Vue file you can use

• some state management with refs
• provide inject
• pinia store

to communicate between these two components

[bjorne84]

Thanks a lot, worked perfect!