单击按钮时页面会奇怪地刷新
[英]The page will strangely refresh when I click the button
问题描述
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:在 login.js 文件中：
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.但是，在我删除了里面的所有代码后，当我单击不应该发生的按钮时，页面仍然会刷新。
4 个解决方案
解决方案1
63 已采纳 2017-06-21 16:36:10
You should add type="button" to your <button> .您应该将type="button"添加到您的<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.如果您没有在<form>中指定<button>的type ，则默认情况下它的行为类似于提交按钮，它会刷新页面。
<type="submit">The button submits the form data to the server.<type="submit">按钮将表单数据提交给服务器。 This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
解决方案2
9 2017-06-22 09:36:22
Or you can do it the vuejs way using Event modifiers like this:或者你可以使用这样的Event 修饰符以 vuejs 的方式进行：
<button v-on:click.prevent="validate" class="btn btn-lg btn-primary btn-block">登录</button>
The prevent event modifier prevents the default behaviour. prevent事件修饰符可防止默认行为。
Its just like using event.preventDefault() inside your event handler就像在事件处理程序中使用event.preventDefault()
解决方案3
4 2020-03-02 04:50:26
Add @submit.prevent to your form.将@submit.prevent添加到您的表单中。
<form @submit.prevent>
....
</form>
解决方案4
0 2017-06-21 16:39:30
When using a form element, the submit action refreshes the page unless you specify return false;使用表单元素时，提交操作会刷新页面，除非您指定return false； at the end of the onsubmit attribute.在onsubmit属性的末尾。 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;尝试在 onclick 属性的末尾（引号之前）放置一个分号，然后键入return false; and it should solve your problem.它应该可以解决您的问题。
解决方案5
-1 2017-06-23 13:07:39
See here "Best Answer" 在这里看到“最佳答案”
In conclusion, I would add @submit.prevent='validate()' attribute to the form so it will not act like a usual submit. 总之，我会将@ submit.prevent ='validate（）'属性添加到表单中，这样它就不会像通常的提交一样。
Hope to clear things up when using forms with Vue.js 希望在使用带有Vue.js的表单时清理一下
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.