8
このvue機能は、基本的に2つの方法があります。最初の1つのpostStatusは、ユーザーが保存ボタンをクリックした直後に投稿を保存するために使用され、もう1つはgetPostsがデータベースからそのユーザーの以前の投稿をすべて検索するために使用されます。ここVue jsレディ機能が起動していない
は、第一の方法postStatus微細（Laravel 5.3の）コントローラへのAJAX呼び出し
$(document).ready(function() {
var csrf_token = $('meta[name="csrf-token"]').attr('content');
/*Event handling within vue*/
//when we actually submit the form, we want to catch the action
new Vue({
el : '#timeline',
data : {
post : '',
posts : [],
token : csrf_token,
limit : 20,
},
methods : {
postStatus : function (e) {
e.preventDefault();
//console.log('Posted: '+this.post+ '. Token: '+this.token);
var request = $.ajax({
url : '/posts',
method : "POST",
dataType : 'json',
data : {
'body' : this.post,
'_token': this.token,
}
}).done(function (data) {
//console.log('Data saved successfully. Response: '+data);
this.post = '';
this.posts.unshift(data); //Push it to the top of the array and pass the data that we get back
}.bind(this));/*http://stackoverflow.com/a/26479602/1883256 and http://stackoverflow.com/a/39945594/1883256 */
/*request.done(function(msg) {
console.log('The tweet has been saved: '+msg+'. Outside ...');
//$("#log").html(msg);
});*/
request.fail(function(jqXHR, textStatus) {
console.log("Request failed: " + textStatus);
});
},
getPosts : function() {
//Ajax request to retrieve all posts
$.ajax({
url : '/posts',
method : "GET",
dataType : 'json',
data : {
limit : this.limit,
}
}).done(function (data) {
this.posts = data.posts;
}.bind(this));
}
},
//the following will be run when everything is booted up
ready : function() {
console.log('Attempting to get the previous posts ...');
this.getPosts();
}
});
});
は、これまで存在しvue.jsを、作動されます。
準備完了機能で2番目のものが呼び出されるか、または起動されるはずですが、何も起こりません。私はconsole.logメッセージも受け取っていませんAttempting to get the previous posts ...。それは決して解雇されないようです。
問題点は何ですか？どうすれば修正できますか？
注：私は、私はあなたがVueの2.0.1を使用していることがわかりjQueryの3.1.1、2.0.1 Vue.js
ええ、それはトリックでした！あなたの追加のメモと便利なリンクをありがとう:) – Pathros
[** _vue-resource_は** axios **のために公式の推奨リストから削除されました。]（https://medium.com/the-vue-point/retiring-vue -resource-871a82880af4） –
ありがとう@EmileBergeronこれを指摘してください。はい、私たちは皆、このVue.js開発者のサークルでこの変更について知り、それを採用しましたが、この特定の回答は非常に長い間忘れていました。私は、将来の読者がこれを自分で発見するために時間を費やす必要がないように、追加の注釈を含める答えを編集しました。再度、感謝します！ – Mani