Vue表单双按钮问题：删除按钮触发提交，如何阻止并打开模态框？

这是前端开发里很常见的小坑，原因其实很简单：在<form>标签内的<button>元素，默认的type属性是submit——哪怕你没手动写这个属性，浏览器也会自动把它识别成表单提交按钮，所以点击「Delete User」时就触发了表单提交动作。

给你几个简单的解决办法，按推荐程度排序：

方法一：给删除按钮显式设置type="button" #

这是最直接也最符合语义化的方案，明确告诉浏览器这个按钮只是普通交互按钮，不负责提交表单。修改你的按钮代码：

<button class="button red" type="button" @click="isModalOpen = true">Delete User</button>

方法二：在点击事件中阻止默认行为 #

如果不想修改按钮的type，可以利用Vue的事件修饰符prevent来阻止浏览器的默认提交动作：

<button class="button red" @click.prevent="isModalOpen = true">Delete User</button>

这个修饰符等价于在事件函数里调用event.preventDefault()，直接取消了表单提交的默认行为。

可选优化：给提交按钮显式设置type="submit" #

虽然浏览器会默认把表单内的按钮当成提交按钮，但为了代码可读性和规范性，建议给「Save Changes」按钮也加上明确的type属性：

<button class="button" type="submit">Save Changes</button>

以上几种方法都能解决你的问题，个人最推荐第一种，因为语义清晰，后续维护代码的人一眼就能看懂按钮的作用。

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