How to set data- attributes dynamically ?

[anjanesh]

Using Flowbite's navbar & AlpineJS to dynamically populate the HTML and assign :data-collapse-toggle="menu.id to :id="menu.id" with an array of menu items.

The target element with id "customer-orders" does not exist. Please check the data-collapse-toggle attribute.

[ekwoka]

can you replicate? codepen is helpful. I'd expect it's just a race condition.

[anjanesh]

Odd that it's working now with :data-collapse-toggle="menu.id" and wasn't yesterday.

Basically both these are getting loaded :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>

[anjanesh]

I realize if I load alpinejs with defer then it doesn't work.

[SimoTod]

You need to make sure the other library starts after alpine. How do you start flowbite?

[anjanesh]

I have this <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script> before alpine now - will reverse it.

[SimoTod]

You'll also need to defer it otherwise it's going to kick in before Alpine anyway