不会触发Vue js Readyfunction

我有这个vue函数，其中基本上有两种方法。 第一个postStatus用于在用户单击保存按钮后保存post，另一个getPosts用于从数据库中检索该用户的所有先前post。

这是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

Answer 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在评论中所指出的那样，vue-resource在2016年11月就已经退役了（几周后我在vue-resource最后一段提供了这个答案）。 以下是相同的更多信息：

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

Answer 2

@Mani建议使用的mounted(){}适用于未隐藏的组件。 如果您希望在可见时在组件中运行某个函数，并且使用v-if=""或v-show=""等条件隐藏该函数，则使用updated(){} 。