Vue - 当 Button 放置在修改对象上方时（使用 Bootstrap btn），@click 不会触发

Question

这有效：

这不起作用

删除最后一个 - 按钮负责从“产品表”中删除行。

我不明白这里的问题是什么。事件是否总是需要放置在修改元素之后？这对我来说真的没有意义。

代码下方：

<template>
...
<button @click="removeItem(itemID)" type="button" class="btn btn-danger">delete last</button>
<table>...<table>
...
<tamplate>

<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>

这在以下情况下完美工作

• 删除最后一个 - 按钮位于“产品表”上方

而它

不起作用时

• 删除最后一个 - 按钮位于“产品表”下方

Answer 1

您的图片与您的描述不符

1. 无论元素的位置如何，事件处理程序都应该正常工作
2. 正如评论中提到的，Bootstrap 可能会干扰（DOM 操作不适用于 Vue 的 VDOM）
3. 确保在开发工具中事件处理程序已正确附加到按钮：
4. 

还提供任何控制台错误

否则该问题可能被认为缺乏调试细节。