Vuetify v-form组件@submit事件无响应问题求助

我之前也碰到过一模一样的情况！问题大概率出在提交按钮的type属性上，Vuetify的v-btn组件默认的type是button，这种类型的按钮不会触发表单的submit事件，自然就没法触发你绑定的checkLogin方法。

下面是你需要调整的几个关键点：

1. 给提交按钮设置type="submit" #

这是最核心的一步，把你的提交按钮改成这样：

<v-form @submit.prevent="checkLogin">
  <!-- 你的用户名、密码输入框 -->
  <v-btn type="submit" color="primary">登录</v-btn>
</v-form>

只要按钮设置了type="submit"并且在v-form内部，不管是点击按钮还是在输入框按回车，都会触发表单的submit事件，进而执行checkLogin方法。

2. 排查其他可能的问题 #

如果设置了type="submit"还是没反应，可以检查这几个地方：

• 确认按钮确实在v-form的DOM范围内，没有被v-if、v-show或者其他组件移到表单外面；
• 检查表单有没有被设置disabled属性，或者按钮本身被禁用了（比如绑定了:disabled="someCondition"）；
• 确保输入框是可聚焦的（没有设置disabled或readonly），回车触发提交需要表单内至少有一个可交互的表单元素。

为什么绑按钮上能生效？ #

当你把@click="checkLogin"绑在v-btn上时，本质是直接给按钮绑定了点击事件，和表单的submit机制无关，所以点击按钮能触发，但回车没法触发——因为回车是触发表单的submit，而不是按钮的click。

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