未触发 Vue js Ready 功能

Posted 2023-02-22

【中文标题】未触发 Vue js Ready 功能

【英文标题】：Vue js Ready function is not triggered

【发布时间】：2017-03-05 16:49:27

【问题描述】：

我有这个 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://***.com/a/26479602/1883256  and  http://***.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

【参考方案1】：

我看到您使用的是 Vue 2.0.1。 Vue 2.0 及以上版本没有ready 方法。

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

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

不是问题，只是注意：您正在广泛地混合使用 jQuery 和 Vue。如果你只需要 jQuery 来处理 http 相关的功能，你可以改用 vue-resource - https://github.com/vuejs/vue-resource

编辑：更新vue-resource

正如@EmileBergeron 在 cmets 中指出的那样，vue-resource 早在 2016 年 11 月就已退役（几周后，我在vue-resource 的最后一段提供了这个答案）。以下是有关相同内容的更多信息：

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

【讨论】：

是的，成功了！感谢您的额外说明和有用的链接:)

vue-resource was removed from the official recommendation list in favor of axios.

感谢@EmileBergeron 指出这一点。是的，我们Vue.js 开发者圈子里的所有人都知道这个变化并接受了它，但是我很长一段时间都忘记了这个特定的答案。我已经编辑了答案以包含额外的注释，以便未来的读者不必花时间自己发现这一点。再次感谢！

@Mani 感谢您提供的信息丰富的回答。不过，我要提出一个批评：如果vue-resource 或axios 或whatever 真的比$.ajax() 好太多，那为什么我们还没有疯狂地蜂拥而至呢？不要再告诉人们如何骑滑板了。并用反 jQuery 的言辞阻止它。 $.ajax() 是经过实战考验的坦克，已经使用了数年，并有望成为一种对数十年有用的方法。 vue-resource 可以说同样的话吗？请记住，这些天去太空的唯一途径是Soyuz。

@Mani 感谢您的深思熟虑和内容丰富的回复。你对$.ajax() 作为一个独立的库提出了一个非常 的好观点。我不同意对 85kb 的担心。即使在最糟糕的网络上，与互联网上 99.999% 的网站相比也是如此。然而，作为公认的高端设备所有者，你给了我一些新的研究，这只会带来新的和更好的技术。感谢您的思考！

【参考方案2】：

@Mani 使用mounted() 的建议适用于未隐藏的组件。如果您想在组件中运行可见的函数，并且使用 v-if="" 或 v-show="" 等条件隐藏元素，请使用 updated()。

【讨论】：

确实，加载页面时已安装。假设您进行刷新，已安装的段被触发。但是更新了。尽管似乎我需要声明两者才能使其正常工作。我的特定 vue 文件作为通用主样板的一部分加载，适用于已登录/未登录的用户，因此 navbar.vue - 当用户登录到已安装的段时，或者我应该说内部检查没有运行但使用更新的方法 - 这是它在登录后调用的块