Needing to create a dynamic accordion, so adjusted the standard Wappler accordion component like this
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="3">
<div class="card">
<div class="card-header" dmx-bind:id="accordion1_headingOne{{$index}}">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="#accordion1_collapseOne{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapseOne{{$index}}">
Collapsible Group Item {{$index}}
</button>
</h5>
</div>
<div dmx-bind:id="accordion1_collapseOne{{$index}}" class="collapse" is="dmx-bs4-collapse" show="true" aria-labelledby="accordion1_headingOne" data-parent="#accordion1">
<div class="card-body">
A Nice paragraph.
</div>
</div>
</div>
</div>
However the above code does not work, and using developer tools, it looks like the reason why is that the dmx-bind:id="accordion1_collapseOne{{$index}}"
attribute for the card body is not parsing the {{$index}}
. If I remove the is="dmx-bs4-collapse"
then it all works as expected, however I am not sure what functionality I may lose by removing that attribute. Can anyone confirm if removing that is safe to do to get around this or if its a bug I should wait for a fix on.
UPDATE: figured out the problem, the above code does work perfectly including the parsing of {{$index}}
however I had to manually add a reference to <script src="/dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script>
in the document head as it is not auto adding when i add an accordion component to my blank page.
Mac OS X Catalina, with Wappler 2.8.4
Last updated: