Vue js Ready函数未触发

JavaScript Vue.js

斯丁Davaid

2020-03-19

我有这个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运行良好。

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

有什么问题 我如何解决它?

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

第2336篇《Vue js Ready函数未触发》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
ㄏ囧囧ㄟ 2020.03.19

我看到您正在使用Vue 2.0.1。readyVue 2.0及更高版本中没有任何方法。

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

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

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

编辑:更新 vue-resource

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

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

十三古一 2020.03.19

@Mani建议使用mounted(){}未隐藏的组件。如果您希望在组件可见时运行该功能,而使用诸如v-if=""或的条件将其隐藏v-show=""则使用updated(){}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android