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>

在login.js文件中：

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

        },
        say: function (){

        }
    }
});

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

Answer 1

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

如果您未在type中指定<button> <form>，则默认情况下其行为类似于提交按钮，这会刷新页面。

Docs：

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

Answer 2

或者您可以使用Event modifiers这样的vuejs方式：

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

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

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

Answer 3

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

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

Answer 4

使用 form 元素时，除非在 onsubmit 属性的末尾指定 return false; ，否则提交操作会刷新页面。我相信你在这里有同样的问题。

尝试在onclick属性的末尾添加分号（在引号之前），然后键入 return false; ，它应该可以解决您的问题。

Answer 5

See here "Best Answer"

总之，我会添加@ submit.prevent =＆＃39; validate（）＆＃39;属性到表单，所以它不会像通常的提交一样。

希望在使用带有Vue.js

的表单时清理一下

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

5 个答案:

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

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

5 个答案:

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

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