Vue二次确认弹窗时表单怎么还是会直接提交？

开发者纳利提问于 2026-02-09 16:35:30 阅读 16

交互

大家好，我在做一个表单删除操作的二次确认功能，但发现即使弹出confirm对话框，表单还是会直接提交了…

代码是这样的：

<form @submit="handleDelete">
  <button type="submit">删除数据</button>
</form>

<script>
methods: {
  async handleDelete() {
    const confirm = window.confirm('确定删除吗？')
    if (!confirm) return
    await this.$api.deleteData()
  }
}
</script>

问题是点击按钮时，虽然confirm弹窗出现了，但后端接口居然在点击确认前就已经调用了。难道是async/await的位置有问题？我试过把await放在confirm前面也不行…

有没有更好的方式让表单真正等待用户确认后再执行删除？或者是不是应该用事件对象来控制提交流程？

二次确认反馈机制

我来解答赞 4 收藏

反馈

1 条解答

梦玲（打工版） Lv1

问题出在你没阻止表单的默认提交行为。window.confirm 是同步的，但表单的 submit 事件如果不显式阻止，浏览器就会直接提交，根本不会等你后面的逻辑。

你的 async/await 写法本身没问题，关键是 submit 事件必须调用 preventDefault()。你现在这样写，页面可能已经发起了一次传统表单提交，导致接口被调用。

正确做法是传入事件对象，先阻止默认行为：

methods: {

  async handleDelete(e) {

    e.preventDefault() // 阻止表单默认提交

    const confirmed = window.confirm('确定删除吗？')

    if (!confirmed) return

    try {

      await this.$api.deleteData()

      // 删除成功后可以刷新列表或提示

    } catch (err) {

      console.error('删除失败', err)

    }

  }

}

另外建议别用

包这种纯前端操作的按钮，直接用 button 触发方法更干净。如果非要用 form，至少把 button 的 type 改成 button 而不是 submit，避免误会。

你现在的情况八成是页面刷新或者发了两个请求，一个是原生表单提交，一个是你的 API 调用。加了 preventDefault() 就能彻底解决。

2026-02-09 17:00