vue-btn 不按 Enter 键提交

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

  })

 }

}

如果我可以按 Enter 登录，这将对我有很大帮助，谢谢

Answer 1

将login方法调用移动到form元素并声明v-btn type为submit-<v-form @submit="login">&nbsp;<v-btn&nbsp; color="gray"&nbsp; padding="20"&nbsp; data-cy="button-login"&nbsp; type="submit"&nbsp;>&nbsp; SIGN IN&nbsp;</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/forms2.xx => https://vuetifyjs.com/en/components/forms/