Vuejs Ready 기능이 트리거되지 않았습니다.

Vuejs Ready 기능이 트리거되지 않았습니다.

저는 기본적으로 두 가지 방법이 있는 이 vue 함수를 가지고 있습니다.첫번째 것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잘 작동하고 있습니다.

두 번째 것은 준비된 기능에서 바로 호출되거나 발사되어야 하지만, 아무 일도 일어나지 않습니다.console.log 메시지도 표시되지 않습니다.Attempting to get the previous posts ...발사된 적이 없는 것 같습니다.

무엇이 문제입니까?어떻게 고치죠?

참고: 저는 jQuery 3.1.1, Vue.js 2.0.1을 사용하고 있습니다.

Vue 2.0.1을 사용하고 있습니다.거기에는 없다ready방법은 Vue 2.0 이상입니다.

다음은 모든 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

@마니의 사용 제안mounted(){}숨겨진 구성 요소에서 작동합니다.다음과 같은 조건을 사용하여 숨겨진 요소와 표시될 때 구성 요소에서 기능을 실행하려는 경우v-if=""또는v-show=""그 다음에 사용updated(){}.

언급URL : https://stackoverflow.com/questions/40209443/vue-js-ready-function-is-not-triggered