vue-btn在按下回车键时无法提交

Question

我有一个普通的登录表单，末尾有一个提交按钮，必须使用鼠标点击该按钮才能提交。我想用回车键提交表单。

这是我的按钮代码

<v-btn
 color="gray"
 padding="20"
 data-cy="button-login"
 @click="login"
 >
 SIGN IN
</v-btn>

这是我的JavaScript登录函数。

methods: {
 login () {
 let params = {
  mail: this.email,
  password: this.password
  }
   this.$store.dispatch('login', params).then((response) => {
   this.$router.push({name: 'dashboard', params: {'userId': String(response.data.user_id)}})
  }).catch(() => {
   this.submitsnackbar = true
  })
 }
}

如果我只需按下回车键即可登录，这将对我非常有帮助。 谢谢。

- Zuhairi

Answer 1

将login方法调用移至form元素并声明v-btntype为submit-

<v-form @submit="login">
 <v-btn
  color="gray"
  padding="20"
  data-cy="button-login"
  type="submit"
 >
  SIGN IN
 </v-btn>
</v-form>

- kann

---

非常感谢您，但很抱歉因为我真的是个菜鸟。 - Zuhairi

你也可以使用 @submit.prevent="login"，仅执行你的 login 方法而不触发默认的提交行为。 - Mathieu Rollet

Answer 2

你需要将你的表单和 <v-btn> 包含在一个 <v-form> 组件中，然后使用 <v-form> 上的 @submit 事件处理程序来处理表单提交。由于你没有指定使用的 Vuetify 的主要版本，因此根据你的框架版本，这里是每个 <v-form> 组件定义的链接：

• 1.5.x => https://v15.vuetifyjs.com/zh-Hans/components/forms
• 2.x.x => https://vuetifyjs.com/zh-Hans/components/forms/

- th3n3wguy

---

非常感谢您的答复，我会参考它。 - Zuhairi