Vue js Ready函数未触发 [英] Vue js Ready function is not triggered

问题描述

我有这个vue函数，基本上有两种方法.用户单击保存按钮后，第一个postStatus用于保存帖子，而第二个getPosts用于从数据库检索该用户的所有先前帖子.

I have this vue function where there are basically two methods. The first one postStatus is used to save a post just after the user clicks on the save button, and the other one getPosts is used to retrieve all previous posts of that user from the database.

这里是vue.js，其中有一个对控制器的ajax调用(在Laravel 5.3中)

Here is the vue.js, where there is an ajax call to a controller (in 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正常工作.

So far the, first method postStatus is working fine.

第二个应该在ready函数处被调用或触发，但是什么也没有发生.我什至没有收到console.log消息Attempting to get the previous posts ....看来它从未被解雇.

The second one is supposed to be called or fired right at the ready function, however, nothing happens. I don't even get the console.log message Attempting to get the previous posts .... It seems it's never fired.

出了什么问题?我该如何解决?

What is the issue? How do I fix it?

注意:我正在使用jQuery 3.1.1，Vue.js 2.0.1

Notes: I am using jQuery 3.1.1, Vue.js 2.0.1

推荐答案

我看到您正在使用Vue 2.0.1. Vue 2.0及更高版本中没有ready方法.

I see that you are using Vue 2.0.1. There is no ready method in Vue 2.0 and above.

以下是所有Vue 2.0更改列表的链接: https://github.com/vuejs/vue/issues/2873

Here is the link to list of all Vue 2.0 changes: https://github.com/vuejs/vue/issues/2873

如上一页所述，您可以使用mounted代替ready.

As mentioned in the page above, you can use mounted instead of ready.

这不是问题，而只是一个注意事项:您正在广泛地混合使用jQuery和Vue.如果只需要jQuery用于与http相关的功能，则可以改用vue-resource- https://github.com /vuejs/vue-resource

Not an issue, but just a note: You are mixing jQuery and Vue extensively. If you need jQuery only for http related functions, you may instead use vue-resource - https://github.com/vuejs/vue-resource

在vue-resource

Update on vue-resource

正如@EmileBergeron在评论中指出的那样，vue-resource早在2016年11月就已退休(在我在vue-resource的最后一段中提供此答案的几周后).这是有关同一内容的更多信息:

As pointed out by @EmileBergeron in the comments, vue-resource was retired way back in November 2016 itself (few weeks after I provided this answer with that last paragraph on vue-resource). Here is more info on the same:

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

这篇关于Vue js Ready函数未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！