Vue.js 3中v-for循环内调用Tailwind模态框失效问题

在Vue.js 3项目中，通过v-for循环生成表格行时，点击删除按钮无法触发Tailwind模态框，但手动编写静态表格行时模态框正常工作。

原因分析 #

Tailwind UI的模态框默认依赖原生DOM事件绑定，页面加载完成后会给带有data-modal-toggle属性的元素绑定点击事件。但v-for动态生成的表格行是在初始事件绑定之后才渲染到DOM中的，所以这些动态生成的按钮没有被绑定触发模态框的事件。

另外，直接复用同一个模态框ID的方式，在Vue的响应式场景下也不够灵活，无法关联当前要删除的产品数据。

解决方案 #

改用Vue的响应式状态控制模态框的显示与隐藏，替代原生DOM事件绑定的方式，同时记录当前要删除的产品ID：

步骤1：定义响应式变量 #

在Vue组件的<script setup>中添加：

import { ref } from 'vue'

// 控制模态框显示/隐藏
const showDeleteModal = ref(false)
// 存储当前要删除的产品ID
const currentDeleteId = ref(null)

// 打开删除模态框的方法
const openDeleteModal = (productId) => {
  currentDeleteId.value = productId
  showDeleteModal.value = true
}

// 关闭删除模态框的方法
const closeDeleteModal = () => {
  showDeleteModal.value = false
  currentDeleteId.value = null
}

// 执行删除操作的方法
const handleDelete = () => {
  // 这里编写删除逻辑，比如调用API删除ID为currentDeleteId.value的产品
  console.log('删除产品ID：', currentDeleteId.value)
  // 删除完成后关闭模态框
  closeDeleteModal()
}

步骤2：修改表格中的删除按钮 #

将原来的按钮改为调用Vue方法，不再依赖data-modal-toggle：

<td class="py-4 px-6">
  <button @click="openDeleteModal(product.id)" class="text-red-600 hover:text-red-800">
    Delete
  </button>
</td>

步骤3：修改模态框代码 #

用响应式变量控制模态框的显示状态，替换原生的data-modal-toggle绑定：

<div 
  id="delete-modal" 
  tabindex="-1" 
  :class="['overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full', showDeleteModal ? '' : 'hidden']"
>
    <div class="relative p-4 w-full max-w-md h-full md:h-auto">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <button 
              type="button" 
              class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
              @click="closeDeleteModal"
            >
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                <span class="sr-only">Close modal</span>
            </button>
            <div class="p-6 text-center">
                <svg aria-hidden="true" class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this product?</h3>
                <button 
                  type="button" 
                  class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
                  @click="handleDelete"
                >
                    Yes, I'm sure
                </button>
                <button 
                  type="button" 
                  class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
                  @click="closeDeleteModal"
                >No, cancel</button>
            </div>
        </div>
    </div>
</div>

为什么这样有效？ #

• 用Vue的响应式变量控制模态框的hidden类，完全适配动态渲染的元素，无需依赖原生DOM事件绑定。
• 通过currentDeleteId可以准确获取当前要删除的产品ID，解决了复用同一个模态框时的数据关联问题。

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