Data attribute components do not work inside v-for loop in Vue.js

[gassio]

Describe the bug Tooltip (for example) functionality inside the v-for loop doesn't behave as expected. Instead of showing the tooltip for the corresponding button, there's no action or incorrect behavior.

To Reproduce Steps to reproduce the behavior:

1. Hover over (or click, based on the expected tooltip activation method) the "data tooltip" button.
2. The tooltip either doesn't appear or behaves incorrectly.
3. No errors are visible in the console.

Expected behavior When hovering over (or clicking) the "data tooltip" button, a tooltip containing the target's name should appear directly above or below the button.

Code

<script setup>
import { initTooltips } from 'flowbite'
import { onMounted } from 'vue';

onMounted(() => {
    initTooltips();
})
</script>

<template>
  <div v-for="item in items" :key="item.id">
        <button :data-tooltip-item="`tooltip-default-${item.id}`" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
       Test
        </button>
        <div :id="`tooltip-default-${item.id}`" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
            Test
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </div>
</template>

[SunKechang]

Yes! I encountered a similar issue when using the DatePicker component. Specifically, when I have a variable that can change and I use it in a v-for loop, it triggers the problem. like this:

<template>
    <div class="flex gap-4 mb-6" v-for="one in x" :key="one">
          <DateRangePicker
            @change="attDataPeriodo($event)"
            label="Período de captação dos leads"
        />
    </div>
</template>
<script setup>
import DateRangePicker from "../components/dateRangePicker.vue";
import {ref} from 'vue'
const x = ref([])
setInterval(()=> {
    x.value.push(1)
}, 1000)
</script>

[zoltanszogyenyi]

Hey @gassio, @SunKechang,

Since v2.4.1 the datepicker is a core component of the Flowbite JS which now exposes it to the instance manager:

https://flowbite.com/docs/components/datepicker/#javascript-behaviour

Please also check this Vue repo where I configured the datepicker examples:

https://github.com/themesberg/tailwind-vue-starter

Cheers, Zoltan

[gassio]

@zoltanszogyenyi thank you very much! What about the tooltip inside a v-for loop?