逻辑不工作后，然后

我有一个login终点，回应我一个JSON。 我使用vue-router进行POST，然后在localStorage中存储一个令牌，但在POST之后，json显示在屏幕上：

{"success":false,"message":"Login ou senha inválidos!"} 

它应该返回页面login，并带有消息

这是代码：

 var vmLogin = new Vue({ el: '#login', data: { email: '', msg: '', password: '' }, beforeCreate: function () { if(localStorage.getItem("timeTaskToken") !== null) { window.location.href = '/' } }, methods: { getLogin: function (e) { this.$http.post('/login', {email: this.email, password: this.password}).then((response) => { alert('teste!'); if(response.body.success === true) { localStorage.setItem("timeTaskToken", response.body.token); window.location.href = '/' } else { this.msg = response.body.message } }, (response) => { // error callback }); e.preventDefault(); } } }); 

login页面

 <form id="login" class="form-horizontal" method="post"> <h3>{{ msg }}</h3> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" v-model="email" class="form-control" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" v-model="password" class="form-control" name="password" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default" @click="getLogin">Sign in</button> </div> </div> </form> 

这就像什么都没有，然后工作…

返回的JSON只出现在屏幕上。

Answer 1

我期望的问题是，loginbutton是一个submitbutton，你只是希望它是一个buttonbutton。

更改

 <button type="submit" class="btn btn-default" @click="getLogin">Sign in</button> 

至

 <button type="button" class="btn btn-default" @click="getLogin">Sign in</button> 

注意type="button" 。

如果你把它作为typessubmit那么表单实际上是公布的，代码执行将停止。 这也解释了为什么你看到一个只有JSON结果的页面; 这只是发布该表单的回应。

或者，将e.preventDefault()移动到方法的顶部。

你也可以使用@click.prevent="getLogin" 。

Answer 2

只要在你的错误callback中添加一个console.error

 }, (response) => { console.error(response); }); 

这是第一步，因为也许你只是在这里input..