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>

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

Wordpress functionality for filtering Ajax posts using radio buttons

I am in the process of creating an Ajax post filter system using radio buttons to allow users to filter through multiple categories. Below is the code I have implemented: Front-end form: <form id="filter"> <?php if( ...

Relaunch jQuery script on dynamically loaded content via AJAX requests

Currently, I am utilizing the Advanced Ajax Page Loader plugin for wordpress to dynamically load content through ajax. However, I am encountering an issue where my custom jquery scripts do not execute properly when the content is loaded via ajax. Interesti ...

Guidance on utilizing Vuetify's "Select" dropdown list in Nuxt.js and Vue.js

When using nuxt.js in my form with a Vuetify "Select" Dropdown list, the dropdown items are not showing. How can I fix this error? <v-col class="d-flex" cols="12" sm="6" > <v-select :items="items" v-mode ...

During bundling, utilize an npm script to copy the package.json file to the dist directory

Currently, I am facing a challenge while trying to enhance my npm bundle script. Although the initial part is functioning smoothly, I am encountering difficulties in including three additional files along with the bundle. At present, my script looks like ...

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

unable to locate the PHP file on the server

Struggling to make an API call via POST method to retrieve data from a PHP file. Surprisingly, the code functions properly on another device without any hiccups. However, every time I attempt to initiate the call, I encounter this inconvenient error messag ...

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

Having an issue where I can't remove and redraw the chart in my React Highchart project. I've been unable to find a solution for this problem. Here is the code snippet: import { useState, useEffect, useRef } from "react"; import Highch ...

What methods can be used to modify the behavior of tiptap when pasting plain text?

Currently, my goal is to create a visual editor by utilizing the tiptap library. Although v2 of tiptap is more commonly used, there are instances where v1 is necessary. However, I encountered an issue with tiptap's behavior when pasting plain text, ...

The CSS transition will only activate when coupled with a `setTimeout` function

After using JavaScript to adjust the opacity of an element from 0 to 1, I expected it to instantly disappear and then slowly fade back in. However, nothing seems to happen as anticipated. Interestingly, if I insert a setTimeout function before applying th ...

Executing PHP code from a list item

On one of my website pages, I have a list that functions as a delete button. However, I am interested in making it so that when a user clicks on the delete option, a php script is triggered - similar to how a submit button works. Below is the list structu ...

Graph columns failing to display on Chart.js bar chart

I'm currently facing a challenge while trying to create a bar chart using HTML and JavaScript. Unfortunately, the bars are not showing up for some reason. I have included the code snippet below along with an imagehttps://i.stack.imgur.com/4H7ol.png. ...

How to link AngularJS controller from a different module in routing

My current project involves creating a complex app with a structured design: Each module is organized in its own folder structure, including controllers, directives, and more. Within each folder, there is an index.js file along with other files for separ ...

Saving data in multiple collections using MongoDB and Node.js: A comprehensive guide

In a recent project of mine, I have implemented a combination of nodeJS and mongodb. My main goal is to store data in multiple collections using just one save button. Below is the code snippet that I am currently working with: var lastInsertId; loginDat ...

What is the best way to create 7 or 8 column grids with Vuetify's v-row and v-col components?

I understand that vuetify's grid system is based on a 12-column flex-box layout, but I would like to customize it to have 7 or 8 columns by default instead of the usual 12. In the code snippet below, you can see my attempt: <v-row> <v-col ...

Is there a C++ equivalent to the JS Array.prototype.map method?

When it comes to JavaScript, Array.prototype.map is a powerful tool for creating a new array by applying a function to each element. Consider the following example: const elements = [{ text: 'hi1' }, { text: 'hi2' }, { text: 'hihi ...

Performing an AJAX request to send data containing special characters

What is the best way to send a large string with special characters like '%' and '&' to my PHP page using AJAX POST? In simple terms, how can I encode these characters in JavaScript and then decode them in PHP? ...

Problems arising from the implementation of CSS modules in React applications

As a beginner in React, I recently started learning how to utilize CSS modules within my React projects. However, I encountered an error that read: Failed to compile. ./src/components/Header/Header.js Module not found: Can't resolve './Header.mo ...

What sets class/instance methods apart from static methods when it comes to their functionality in applications?

As I develop APIs for my application, I've been curious about the difference between defining functionality methods like this: class Foo { static method1(req, res) {} static method2(req, res) {} } and class Foo { method1(req, res) {} method ...

Determine using Javascript or jQuery whether the value of input1 is greater than the value of input2

Ensuring that Value1 is always greater than Value2 in a form submission is crucial. If Value1 becomes greater than or equal to Value2, an error message should be displayed and the form submission should not be processed. Below is the code for the form: & ...

Entering a value into an HTML textbox using Awesomium in VB.NET

This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...