25

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.

XINDI LI
  • 625
  • 2
  • 7
  • 16

4 Answers4

66

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.

nem035
  • 34,790
  • 6
  • 87
  • 99
9

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

tony19
  • 125,647
  • 18
  • 229
  • 307
Vamsi Krishna
  • 30,568
  • 8
  • 70
  • 78
5

Add @submit.prevent to your form.

<form @submit.prevent>
 ....
</form>
Sapnesh Naik
  • 11,011
  • 7
  • 63
  • 98
0

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.

Brandon Dixon
  • 1,036
  • 9
  • 16
  • 1
    `return false` isn't [consistent](https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false). `e.preventDefault` is the proper way. – nem035 Jun 21 '17 at 16:40