可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Here's my code:

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

In the login.js file:

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

        },
        say: function (){

        }
    }
});

At the beginning, I thought it had something to do with the code within method "validate". However, after I deleted all the code inside, the page still get refreshed when I click the button which is not supposed to happen.

回答1:

You should add type="button" to your <button>.

If you don't specify a type of a <button> in a <form>, it will behave like a submit button by default, which refreshes the page.

Docs:

<type="submit"> The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

回答2:

Or you can do it the vuejs way using Event modifiers like this:

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

The prevent event modifier prevents the default behaviour.

Its just like using event.preventDefault() inside your event handler

回答3:

Add `@submit.prevent` to your form.

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

回答4:

When using a form element, the submit action refreshes the page unless you specify return false; at the end of the onsubmit attribute. I believe you are having the same issue here.

Try putting a semicolon at the end of your onclick attribute (before the quote), then type return false; and it should solve your problem.