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

Question

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

这是我的代码:

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

Run Code Online (Sandbox Code Playgroud)

在login.js文件中:

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

        },
        say: function (){

        }
    }
});

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

nem*_*035 34

你应该加入type="button"你的<button>.

如果没有指定type的<button>一个<form>,它会像在默认情况下一个提交按钮,刷新页面.

文件:

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

Answer 2

Sap*_*aik 6

添加`@submit.prevent`到您的表单。

<form @submit.prevent>
 ....
</form>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Vam*_*hna 5

或者您可以使用事件修饰符通过vuejs方式做到这一点：

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

Run Code Online (Sandbox Code Playgroud)

该prevent事件修饰符阻止默认行为。

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

归档时间：	8 年，3 月前
查看次数：	9253 次
最近记录：	8 年，3 月前

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

添加@submit.prevent到您的表单。

添加`@submit.prevent`到您的表单。