【Bug记录】Vue绑定按钮点击事件不生效，控制台不打印信息

最新推荐文章于 2024-09-18 16:15:09 发布

原创最新推荐文章于 2024-09-18 16:15:09 发布 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

Bug记录专栏收录该内容

4 篇文章

订阅专栏

本文记录了Vue新手在绑定按钮点击事件时遇到的问题：点击按钮导致页面刷新，而非执行预期方法。原因在于按钮类型设置为submit，未设置表单action属性导致页面刷新。解决方案是将button type改为button，并绑定onclick事件。

一、问题描述

作为刚入门Vue小白的我，在使用Vue进行登录表单按钮绑定点击事件的时候，发现其方法没有执行。一点击按钮就会重新刷新页面。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <div class="name">最<span>share</span></div>
    <!-- <div class="line"></div> -->
    <div id="app" class="box">
        <span class="welcome">欢迎登录</span>
        <!--        <a href="#" class="phone">手机验证登陆</a>-->
        <a href="#" class="forget">忘记密码？</a>
        <form>
            <input type="text" class="uname" name="" placeholder="用户名/邮箱/手机号" v-model="username">
            <input type="password" class="password" name="" placeholder="密码" v-model="password">
            <input type="submit" class="btn" value="登录" @click="login">
        </form>
        <span class="register">——————<i>未有账号？</i><span>点此注册&gt;&gt;</span>——————</span>
    </div>

    <!-- <div style="font-family: zcoolqingkehuangyouti;">share</div> -->
</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            username: "",
            password: "",
            message: ""
        },
        methods: {
            login: function () {
                axios.post(
                    "/share/user/login",
                    {
                        account: this.username,
                        password: this.password
                    },
                )
                    .then(
                    function (res) {
                        console.log(res);
                    }
                ).catch();
            }
        }
    })
</script>

</html>

二、发现问题并解决

前面说到的，每当按钮点击之后，页面会重新刷新的问题。其原因是表单的按钮的类型是submit，因为submit控件是先执行 onSubmit 事件再执行 onClick 事件的，在代码中的表单的action属性并没有进行设置，会进行页面的刷新，所以onClick事件就不执行了。onSubmit() 是form表单的提交状态方法，在表单提交是可以触发该事件讲button type=submit 改为 type=button 再绑定onclick 事件，就可以执行其绑定的方法事件！
在这里插入图片描述