Pressing the enter key does not submit the Vue.js form

When attempting to submit the form by pressing "enter" on the keyboard, it only works when I click the "submit" button. I made sure to add @submit to the form event to ensure it triggers, but upon checking a log, I found that it only triggers when 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>

https://i.sstatic.net/GXdhb.png

Answer №1

In order to properly submit the form, you must ensure that the button has a type="submit" attribute and maintain the event 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec9a9989acdec294">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bec8cbdbcad7d8c7fe8c90c6">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1811100a3e4a5006">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67111202130e011e2755491f">[email protected]</a>/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="Password"
      required
      type="password"
      outlined
    ></v-text-field>
    <v-btn class="primary mr-4" type="submit">Submit</v-btn>
  </v-form>
</v-app>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating JavaScript Object-Oriented Programming in PHP

As someone new to JS programming, I am tasked with developing a php web application that relies on ajax calls for all actions without reloading the page. While I have completed the php and JS code, I am struggling to understand what JS OOP entails. My coun ...

Tips on adding a base64 encoded image string to a JSON object using JavaScript

I'm trying to convert an image file into a JSON object using JavaScript. I've managed to turn the image into a string by utilizing base64 encoding, but I'm unsure how to then convert this string into a JSON object. Can anyone help? ...

NodeJS buffer is not capable of handling incomplete TCP stream data

While troubleshooting my TCP JSON stream on the live server, I discovered that if the data streamed to me in JSON format is excessive, it doesn't consistently parse correctly. It requires multiple streams for successful parsing. Here is the code I am ...

Is there a method available to condense or merge PHP, DHTML, and JavaScript components efficiently?

The title may be a bit confusing, so let me explain my idea here: Imagine we have a component for a web page, such as a database-driven table or grid. This hypothetical "component" functions independently, relying on several mixed language files: HTML for ...

Error in Node and Express: Unable to access route

Currently, I am in the process of developing an Express application and running into some obstacles with routing. While my '/' route is functioning perfectly fine, other routes are not working as expected. Despite researching similar questions fr ...

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

Can you explain the {| ... |} syntax in JavaScript to me?

While reviewing a javascript codebase, I stumbled upon a section of code that appears as follows: export type RouteReducerProps = {| error?: Error, isResolving: boolean, isResolved: boolean, hasFailed: boolean, |}; Upon closer inspection, it seem ...

Interactive JQuery calendar

Can anybody assist me with this issue? I am seeing question marks in the graphic and I'm not sure why. I remember encountering these symbols before and I believe it has something to do with charset. Currently, I am using: <meta http-equiv="Content ...

The correct method for concealing components from unauthorized users in Vue

After much thought, I'm considering transitioning my app entirely to Vue frontend. However, there are some concerns on my mind, such as: Currently, in Laravel blade (posts page), I have the following structure: @foreach($posts as $post) <post dat ...

The setState function in the useState hook is being called only one time when triggered by an EventListener

Within my functional component, I am utilizing the useState hook to store state. When the user reaches the bottom of the page, I want to dynamically add content. To achieve this, I implemented an EventListener for 'scroll' within a useEffect hook ...

The Vue.js transition feature seems to be malfunctioning when trying to display a modal

I can't figure out why my animation isn't working with Vue transitions. Here is the code I have: <template> <teleport to="body"> <div class="modal-overlay" v-if="loading"> <transitio ...

Guide on decrypting a file encrypted with C# using Node JS

I currently have encrypted files in C# using DES and PKCS7 encryption. My objective is to decrypt these files in Node JS. The decryption code in C# that I am using appears like this: public string SSFile_Reader( string fileToDecrypt ) { DESCryptoService ...

Automatically synchronize dynatable with AJAX requests and JSON responses

I'm currently facing a bit of confusion as my code appears to be functioning properly, but the table is not updating as expected. xD I am fetching data from my database and loading it into a table, aiming for it to automatically update every three se ...

Formatting HTTP HTML response in Vue.js can be achieved by utilizing various methods and techniques

I have a WordPress site and I'm trying to fetch a specific post by its ID. Currently, the content is being displayed successfully, but it's also showing HTML tags in the main output. Here is an example: https://i.stack.imgur.com/f3pdq.png Code ...

Leveraging CamanJS for canvas filtering

These are my HTML elements: <div class="wrapper"> <nav class="navbar navbar-transparent"> <div class="container-fluid"> <div class="navbar-header"> <span class="btn btn-white btn-file"> ...

Guide on sending an object containing translation strings from Symfony Twig to a Vue component

I am currently working with Shopware using Symfony Twig. I have a small Vue app that needs to be implemented, but I am facing an issue where I am only getting the object keys and not the values when trying to pass translated strings from the shop as text i ...

Move the cursor to the bottom of a div that can be edited

I have been struggling to position the cursor at the end of the next or previous editable content tag if the current one is empty. However, when I try to set focus, it always ends up at the beginning of the text instead of the end. I've tried various ...

Is it possible to automatically extract HTML code from a webpage using a function, without having to do it manually?

Is there a way to fetch the HTML code of a website after running a particular function? Here's the scenario I'm dealing with: I need to extract the link of a source embedded in an iFrame element that only becomes visible when I execute a specif ...

Find the differences between the values in two arrays of objects and eliminate them from the first array

const arrayOne = [ { id: 22, value: 'hello' }, { id: 33, value: 'there' }, { id: 44, value: 'apple' } ]; const arrayTwo = [ { id: 55, value: 'world' }, { id: 66, value: 'banana' }, ...

increasing the size of the input thumb compared to the others

Hello fellow React developers, I'm currently learning by coding and I have a question about a slider. I'm trying to make the thumb of the slider bigger, but when I increase its size it doesn't fully display within the input area (as you can ...