vue-btn doesn't submit on enter key

Question

I have this usual login form with submit button on the end, I have to click the button with mouse to submit the button. I want to submit the form with just enter key

this is my button code

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

this is my javascript login function

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

It will help me a lot if I can just press enter to login Thank you

Answer 1

Move login method call to form element and declare v-btn type as 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

You need to wrap your form and <v-btn> in a <v-form> component and then use the @submit event handler on the <v-form> to handle the form submission. Since you didn't specify the major version of Vuetify that you are using, here is the link to each of the <v-form> component definitions, depending on your framework version:

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