@keyup.enter only works when tab is set to the login button

The only time my login button works is when I a direct the tab button after inputting email and password,

I want it to work anytime I press enter and I am on the Login page.

this is a vueJS application

Html template

<template>
        <div class="login-page" id="login-page">
            <div class="form" id="form">
                <form class="login-form" id="login-form">
                <div class="head-login">
                <img class="teamfu-image" src="../assets/teamfu-v.png"/><h2 class="login">Login</h2>
                </div>
                <hr class="beneathBorder" color="white">
                <div>
                    <p class="text">Email:<input v-model="input.email" class="input" type="text" placeholder='e.g. johndeer@gmail.com'/></p>
                    <p class="text">Password:<input v-model="input.password" class="input" type="password" placeholder=" " /></p>
                </div>
                <button type="button" @click="login" @keyup.enter="login" > Login</button>
                <p class="message">Not a part of the team? <router-link class="reg" :to="'/register'">Register</router-link></p>
                </form>
            </div>
        </div> 
</template>

Script

<script>
import { checkUser } from "../db/storage";

export default {
    name : 'login-page',
    data() {
        return{
            input: {
                email: '',
                password: ''
            }
        }
    },
    methods : {
        login() {
            if(this.input.email != "" && this.input.password != "") {

                if(checkUser(this.input.email,  this.input.password) ) {

                    this.$emit("authenticated", true);
                    this.$router.replace('/dashboard');

                } else {

                alert("The username and / or password is incorrect")
                console.log("The username and / or password is incorrect");
            }
        } else {
            
            alert("A username and password must be present")
            console.log("A username and password must be present");
        }
        }
    }
}
</script>

8 thoughts on “@keyup.enter only works when tab is set to the login button”

  1. I do accept as true with all the ideas you have presented in your post.
    They’re really convincing and will certainly work. Still, the
    posts are too brief for novices. May just you please prolong them a little from subsequent time?
    Thank you for the post.

    Reply
  2. Pretty section of content. I just stumbled upon your blog and in accession capital to assert
    that I get in fact enjoyed account your blog posts. Any way I will be subscribing
    to your feeds and even I achievement you access consistently
    rapidly.

    Reply

Leave a Comment