CODEWITHSUNDEEP
vue.jsvuejs3tailwind-cssflowbite
ussrback
ussrback

Reputation: 611

Manipulating tailwind data using Vue

I am using tailwind (flowbite) css for web components that comes with respective css and js. I want to implement acordion component (https://flowbite.com/docs/components/accordion/) and fill its data dynamically using Vue.

        <li
          v-for="({ username, email, role }, index) in myUsers"
          :key="username"
        >
          <h2 v-bind:id="`accordion-open-heading-${{ index }}`">
            <button
              type="button"
              class="flex items-center justify-between w-full p-2 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
              v-bind:data-accordion-target="`#accordion-open-body-${index}`"
              aria-expanded="true"
              v-bind:aria-controls="`accordion-open-body-${index}`"
            >

Seems that the vue part works fine, it grabs the data, creates respective HTML li - lists and changes its HTML tags for accordion access (accordion-open-body-1, accordion-open-heading-1 ..) However, JS that cmes with flowbite can not grab that changes and throws the following error:

enter image description here

Please, advice how can I fix this issue.

Upvotes: 2

Views: 318

Answers (1)

tauzN
tauzN

Reputation: 6931

Change

<h2 v-bind:id="`accordion-open-heading-${{ index }}`">

to

<h2 v-bind:id="`accordion-open-heading-${ index }`">
                                        👆     👆

Upvotes: 3

Related Questions