javascript - @keyup.enter 仅在选项卡设置为登录按钮时有效

问题描述

我的登录按钮唯一有效的时间是在输入电子邮件和密码后直接点击选项卡按钮时，

我希望它在我按下回车键并且我在登录页面上的任何时候都能正常工作。

这是一个 VueJS 应用程序

html模板

<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>
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>

标签： javascriptvue.jsenter

javascript - @keyup.enter 仅在选项卡设置为登录按钮时有效

问题描述

解决方案

推荐阅读