Vue.js form not submitted when pressing enter

I’m trying to submit the form by pressing the "enter" keyboard but it’s only working when I click on the button "submit".

I added the @submit on the form event to be sure it is triggered but I checked with a log that is only triggered by clicking the button.

<template>
  <v-form @submit.prevent="submit">
    <v-text-field
      v-model.trim="email"
      label="E-mail"
      type="email"
      required
      outlined
    ></v-text-field>
    <v-text-field
      v-model="password"
      label="Mot de passe"
      required
      type="password"
      outlined
    ></v-text-field>
    <v-btn class="primary mr-4" @click="submit">Submit</v-btn>
  </v-form>
</template>

<script>
export default {
  name: 'SignInForm',
  data: () => ({
    email: '',
    password: ''
  }),
  methods: {
    submit() {
      console.log('submitted')
    }
  }
}
</script>

enter image description here

82 thoughts on “Vue.js form not submitted when pressing enter”

  1. 632730 43641Hey there, I think your website might be having browser compatibility issues. When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, fantastic blog! 751037

    Reply

Leave a Comment