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">

 <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/