我有这种形式,用户只应在文本区域内键入文本:
<form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
<div class="form-group">
<textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post"></textarea>
</div>
<input type="submit" value="Post" class="form-control btn btn-info">
{{ csrf_field() }}
</form>
然后,我有以下脚本代码,在其中我将vue.js与ajax一起使用,以便将该文本传递到控制器中,并最终将其保存到数据库中:
//when we actually submit the form, we want to catch the action
new Vue({
el : '#timeline',
data : {
post : '',
},
http : {
headers: {
'X-CSRF-Token': $('meta[name=_token]').attr('content')
}
},
methods : {
postStatus : function (e) {
e.preventDefault();
console.log('Posted: '+this.post+ '. Token: '+this.token);
$.ajax({
url : '/posts',
type : 'post',
dataType : 'json',
data : {
'body' : this.post,
}
});
}
},
});
但是,到目前为止,这还行不通,因为存在此令牌不匹配异常。我不知道如何使它工作。如何将此令牌值传递给控制器。我尝试了以下方法:
1)在表单内,我向令牌添加了vue名称:
<input type="hidden" name="_token" value="YzXAnwBñC7qPK9kg7MGGIUzznEOCi2dTnG9h9çpB" v-model="token">
2)我试图将此令牌值传递给vue:
//when we actually submit the form, we want to catch the action
new Vue({
el : '#timeline',
data : {
post : '',
token : '',
},
methods : {
postStatus : function (e) {
e.preventDefault();
console.log('Posted: '+this.post+ '. Token: '+this.token);
$.ajax({
url : '/posts',
type : 'post',
dataType : 'json',
data : {
'body' : this.post,
'_token': this.token,
}
});
}
},
});
...但是在控制台中,vue甚至没有捕获它:(
这导致我出现以下错误:
VerifyCsrfToken.php第68行中的TokenMismatchException:
我如何解决它?有任何想法吗?