单击按钮时页面会奇怪地刷新

新手上路,请多包涵

这是我的代码:

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>中国工程院无线投票系统</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container" id="login">
    <div class="col-md-6 col-md-offset-3">
        <div class="page-header">
            <h1>中国工程院无线投票系统</h1>
        </div>
        <form>
            <div class="form-group">
                <label>用户名</label>
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                    <input type="text" v-model="account.username" class="form-control" placeholder="Username" required
                           autofocus>
                </div>
            </div>

            <div class="form-group">
                <label>密码</label>
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                    <input type="password" v-model="account.password" class="form-control" placeholder="Password"
                           required>
                </div>
            </div>

            <button v-on:click="validate" class="btn btn-lg btn-primary btn-block">登录</button>
        </form>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>

在 login.js 文件中:

 var login = new Vue({
    el:"#login",
    data:{account:{}},
    methods:{
        validate:function () {

        },
        say: function (){

        }
    }
});

一开始,我认为它与方法“validate”中的代码有关。但是,在我删除了里面的所有代码之后,当我单击不应该发生的按钮时,页面仍然会刷新。

原文由 XINDI LI 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 310
2 个回答

您应该将 type="button" 添加到您的 <button>

如果您未在 --- 中指定 type <button> <form> ,它将表现得像默认情况下刷新页面的按钮。

文件

<type="submit"> 按钮向服务器提交表单数据。如果未指定属性,或者如果属性动态更改为空值或无效值,则这是默认值。

原文由 nem035 发布,翻译遵循 CC BY-SA 3.0 许可协议

或者你可以使用像这样的 事件修饰符 以 vuejs 的方式做到这一点:

 <button v-on:click.prevent="validate" class="btn btn-lg btn-primary btn-block">登录</button>

prevent 事件修饰符可防止默认行为。

就像在事件处理程序中使用 event.preventDefault()

原文由 Vamsi Krishna 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题