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
  })
 }
}

如果我可以按回车键登录，这对我有很大帮助 谢谢

Answer 1

将login方法调用移动到form元素并声明v-btn type为submit-

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

Answer 2

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

• 1.5.x => https://v15.vuetifyjs.com/en/components/forms
• 2.xx => https://vuetifyjs.com/en/components/forms/