I'm currently working on a project involving multiple accordion expandable drop-downs. Here is a rough example of what I am dealing with: https://i.sstatic.net/igvrU.png
Each step within the accordion should load a different component when expanded. For instance, "Step 1" would trigger the display of the StepOne.vue component.
To handle the Accordion functionality, I have developed a separate component:
<template>
<div id="accordion">
<div class="card">
<div class="card-header" :id="givenId">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{stepStr}} // step 1,2,3 -etc
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" :aria-labelledby="givenId" data-parent="#accordion">
<div class="card-body">
// A dynamic component needs to be loaded here.
</div>
</div>
</div>
</div>
</template>
My main challenge lies in finding a way for each accordion step to load a unique component without duplicating the entire HTML code for each step.
What I envision is something similar to this structure:
Display.vue
<template>
// Step 1
<accordion :id="step-1" :stepStr="'Step 1'">
<Step-One></Step-One>
</accordion>
// Step 2
<accordion :id="step-2" :stepStr="'Step 2'">
<Step-Two></Step-Two>
</accordion>
// Step 3
<accordion :id="step-3" :stepStr="'Step 3'">
<Step-Three></Step-Three>
</accordion>
</template>
However, implementing this approach has proven challenging. I have also explored passing the component as a prop to be rendered within the accordion, but this does not seem to provide a viable solution either.
Can anyone suggest a method for passing a component to the child Accordion component so that it can correctly render each "step" component?