У меня есть эта форма, где пользователь должен вводить текст только внутри текстовой области:
<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>
Затем у меня есть этот script код, где я использую 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 даже не поймает его: (
Это приводит меня к следующей ошибке:
TokenMismatchException в строке VerifyCsrfToken.php 68:
Как это исправить? Любые идеи?