Dynamic Accordion Usage

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}}
        <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.

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

Community Page
Last updated: