Vuetify表单按回车键无法正确提交的问题解决求助

我之前也碰到过一模一样的情况——加了回车提交功能后页面直接刷新，核心原因就是没阻止表单的默认submit行为。咱们一步步调整代码，既能保留点击按钮和回车提交的功能，又能确保验证通过后执行自定义登录逻辑：

核心修改思路 #

1. 阻止默认提交动作：给<v-form>添加@submit.prevent事件，按下回车触发表单默认submit时，就不会刷新页面，转而执行我们的自定义逻辑。
2. 统一提交入口：让按钮点击和回车提交共用表单的submit事件，避免重复绑定带来的冲突。
3. 优化验证逻辑：减少重复的validate()调用，让代码更高效清晰。

修改后的模板代码 #

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="submit">
  <v-text-field 
    v-model="email" 
    :rules="emailRules" 
    label="E-mail" 
    class="mt-4" 
    required 
    outlined 
  ></v-text-field>
  <v-text-field 
    v-model="password" 
    :rules="passwordRules" 
    label="Password" 
    required 
    outlined 
    :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" 
    :type="show1 ? 'text' : 'password'" 
  ></v-text-field>
  <v-btn 
    :disabled="!valid" 
    color="info" 
    block 
    class="mr-4" 
    type="submit"
  >Sign In</v-btn>
</v-form>

• 移除了按钮的@click="submit"：因为按钮type="submit"会自动触发表单的submit事件，这样点击按钮和按下回车都会走同一个处理逻辑。
• 添加@submit.prevent：直接阻止浏览器默认的表单提交刷新行为。

修改后的submit方法 #

submit() {
  // 仅调用一次验证，拿到结果后判断
  const isValid = this.$refs.form.validate();
  if (isValid) {
    const email = this.email.toLowerCase();
    this.$store.dispatch('login', { email, password: this.password });
  }
}

• 把两次重复的validate()调用合并成一次，用变量接收结果，代码更简洁高效。

为什么之前的方案失效？ #

你之前用@keyup.native.enter="submit"绑定回车，虽然会触发自定义submit方法，但浏览器同时还会执行表单的默认submit行为（也就是刷新页面）——这两个动作是并行的，所以才会出现异常。而用@submit.prevent能一次性解决所有问题：既处理回车提交，又阻止默认刷新，还能复用按钮的提交逻辑，一举三得。

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