Vue js就緒功能沒有觸發

我有這個vue函數，基本上有兩種方法。第一個postStatus用於在用戶點擊保存按鈕之後保存帖子，另一個getPosts用於從數據庫中檢索該用戶的所有以前的帖子。Vue js就緒功能沒有觸發

這裏是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，2.0.1 Vue.js

來源

2016-10-24 Pathros

我看到你正在使用的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資源退休早在2016年11月本身（我在vue-resource的最後一段提供了這個答案後幾周）。這是在同更多的信息：

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

來源

2016-10-24 02:10:55 Mani

是的，這是訣竅！感謝您的額外注意事項和有用的鏈接:) – Pathros

[_vue-resource_已從官方推薦列表中刪除，以支持** axios **。]（https://medium.com/the-vue-point/retiring-vue -resource-871a82880af4） –

感謝@EmileBergeron指出了這一點。是的，我們都在'Vue.js'開發者圈子裏瞭解這個變化並且已經採納了它，但是我很長一段時間都忘記了這個特定的答案。我已經編輯了答案以包含其他註釋，以便將來的讀者不必花時間自行發現。再次感謝！ – Mani

@使用不是隱藏在組件上mounted(){}作品的摩尼的建議。如果您喜歡在可見部件中運行組件時使用的功能，並使用v-if=""或v-show=""等條件隱藏該功能，請使用updated(){}。

來源

2017-04-27 16:49:16 Syed

Vue js就緒功能沒有觸發

回答

相關問題