Vue动态渲染Flowbite Accordion组件JS失效问题求助

问题背景 #

基于Tailwind+Flowbite开发Web组件，通过Vue的v-for动态渲染Accordion列表，DOM元素的ID属性（如accordion-open-body-1）已正确生成，但Flowbite的JS无法识别动态新增的DOM节点，导致交互功能失效并报错。

解决方案 #

Flowbite的交互组件默认在页面初始加载时完成初始化，动态生成的DOM不会自动触发初始化逻辑，需通过以下方式手动处理：

1. 手动初始化单个Accordion组件 #

引入Flowbite的Accordion类，在Vue的生命周期钩子或数据监听中，待动态DOM渲染完成后初始化组件：

<script setup>
import { ref, watch } from 'vue';
import { Accordion } from 'flowbite';

const myUsers = ref([]);

// 模拟数据加载
const fetchUsers = async () => {
  const response = await fetch('/api/users');
  myUsers.value = await response.json();
};

// 监听数据变化，完成DOM更新后初始化Accordion
watch(myUsers, (newUsers) => {
  if (!newUsers.length) return;
  // 等待Vue异步更新DOM
  setTimeout(() => {
    document.querySelectorAll('[data-accordion-target]').forEach(btn => {
      // 避免重复初始化
      if (!btn.hasAttribute('data-initialized')) {
        new Accordion(btn);
        btn.setAttribute('data-initialized', 'true');
      }
    });
  }, 0);
}, { deep: true });

// 页面加载时获取数据
fetchUsers();
</script>

2. 全局重新初始化Flowbite组件 #

如果项目中使用多个Flowbite组件，可以调用全局初始化方法重新扫描所有组件：

<script setup>
import { ref, watch } from 'vue';
import { initFlowbite } from 'flowbite';

const myUsers = ref([]);

const fetchUsers = async () => {
  const response = await fetch('/api/users');
  myUsers.value = await response.json();
};

watch(myUsers, (newUsers) => {
  if (!newUsers.length) return;
  setTimeout(() => {
    initFlowbite();
  }, 0);
}, { deep: true });

fetchUsers();
</script>

关键注意点 #

• 异步DOM更新：Vue的DOM更新是异步的，必须使用setTimeout或nextTick等待DOM渲染完成后再执行初始化。
• 避免重复初始化：通过添加自定义属性标记已初始化的组件，防止多次初始化导致的性能问题或错误。

内容的提问来源于stack exchange，提问作者ussrback