Vue.js form not submitted when pressing enter

user_2679301 0
Viewed 357

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

vuetify.js vue.js javascript
1 Answers

You need to set type="submit" for the button and keep the listener for the form:

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  data: () => ({
    email: '',
    password: ''
  }),
  methods: {
    submit() {
      console.log('submitted')
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <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" type="submit">Submit</v-btn>
  </v-form>
</v-app>

user_74863130
Related