Vue中Bootstrap按钮@click事件触发异常：位置不同功能失效

问题现象 #

「delete last」按钮置于表格上方时，@click事件可正常触发removeItem方法，成功删除表格行；但按钮移至表格下方后，点击事件完全无法触发。

相关代码 #

模板部分（存在拼写错误） #

<template>
  ...
  <button @click="removeItem(itemID)" type="button" class="btn btn-danger">delete last</button>
  <table>
    ...
  </table>
  ...
</tamplate> <!-- 注意：此处拼写错误，应为 </template> -->

脚本部分 #

<script lang="ts">
...
methods: {
    removeItem(elementID: number): void {
      let itemIndex = this.products.findIndex((el) => {
        return el.id === elementID
      })
      if (itemIndex !== -1) this.products.splice(itemIndex, 1)
      else alert("no such item")
    }
}
...
</script>

排查方向及解决方法 #

1. 修复模板语法错误 #

最优先检查：模板闭合标签拼写错误（</tamplate> → </template>），Vue模板标签不闭合会导致DOM渲染异常，可能直接引发下方元素的事件绑定失效。

2. 检查元素是否被遮挡 #

• 打开浏览器开发者工具（F12），选中表格下方的按钮，查看「Elements」面板：
  • 确认按钮的pointer-events样式为auto（若为none会阻止点击）；
  • 查看「Layers」面板，确认没有其他元素（如表格的滚动容器、定位元素）覆盖在按钮上方。

3. 排查动态渲染/作用域问题 #

若表格或按钮是通过v-for动态生成的：

• 确保itemID在按钮所在作用域内可正常访问；
• 改用事件委托避免动态元素的事件丢失：

  <!-- 父元素绑定事件 -->
  <div class="container" @click="handleButtonClick($event)">
    <table>...</table>
    <button data-id="itemID" type="button" class="btn btn-danger">delete last</button>
  </div>
  

  methods: {
    handleButtonClick(event: Event) {
      const btn = (event.target as HTMLElement).closest('.btn-danger')
      if (btn) {
        const elementID = parseInt(btn.dataset.id || '0')
        this.removeItem(elementID)
      }
    },
    // ... 原removeItem方法
  }
  

4. 排查Bootstrap组件冲突 #

• 避免同时引入原生Bootstrap JS和Vue Bootstrap组件库，防止DOM操作冲突；
• 若使用了Bootstrap的折叠、标签页等组件，检查是否存在事件拦截或DOM结构修改的情况。

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