web-dev-qa-db-ja.com

Vue js Ready関数はトリガーされません

私はこれを持っていますvue関数には基本的に2つのメソッドがあります。最初のpostStatusはユーザーが保存ボタンをクリックした直後に投稿を保存するために使用されます。 getPostsは、データベースからそのユーザーの以前のすべての投稿を取得するために使用されます。

これがvue.jsで、ここでコントローラーへのajax呼び出しがあります（Laravel 5.3）

$(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();
        }
    });

});

これまでのところ、最初のメソッドpostStatusはうまく機能しています。

2番目は、ready関数ですぐに呼び出されるか起動されることになっていますが、何も起こりません。 console.logメッセージも表示されませんAttempting to get the previous posts ...。一度も発射されていないようです。

問題は何ですか？どうすれば修正できますか？

注：jQuery 3.1.1、Vue.js 2.0.1を使用しています

javascriptjqueryajaxvue.js
14
Pathros

Vue 2.0.1。を使用していることがわかります。Vue 2.0以降ではreadyメソッドはありません。

すべてのVue 2.0の変更点のリストへのリンク： https://github.com/vuejs/vue/issues/2873 ）

上記のページで述べたように、mountedの代わりにreadyを使用できます。

問題ではなく、ただの注意：jQueryとVueを広範囲に混合しています。http関連の関数にのみjQueryが必要な場合は、代わりにvue-resource- https://github.com/vuejs/vue-resource

編集：vue-resourceの更新

コメントで@EmileBergeronが指摘したように、vue-resourceは2016年11月自体で廃止されました（vue-resourceの最後の段落でこの回答を提供してから数週間後）。同じものに関する詳細情報は次のとおりです。

https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4

50
Mani

mounted(){}を使用するという@Maniの提案は、非表示ではないコンポーネントで機能します。 _v-if=""_や_v-show=""_のような条件を使用して非表示になっているコンポーネントで関数を実行したい場合は、updated(){}を使用します。

9
Syed