2016-10-24 11 views
8

मेरे पास यह वू फ़ंक्शन है जहां मूल रूप से दो विधियां हैं। पहला उपयोगकर्ता postStatus उपयोगकर्ता को सहेजने वाले बटन पर क्लिक करने के बाद पोस्ट को सहेजने के लिए उपयोग किया जाता है, और अन्य getPosts डेटाबेस से उस उपयोगकर्ता की सभी पिछली पोस्ट पुनर्प्राप्त करने के लिए उपयोग किया जाता है। जहां एक नियंत्रक के लिए एक 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 काम कर रहा है ठीक है

यहाँ, vue.js है।

दूसरे को तैयार समारोह में सही कहा जाता है या निकाल दिया जाता है, हालांकि, कुछ भी नहीं होता है। मुझे console.log संदेश भी नहीं मिला Attempting to get the previous posts ...। ऐसा लगता है कि इसे कभी नहीं निकाल दिया जाता है।

समस्या क्या है? मैं इसे कैसे ठीक करूं?

नोट्स: मैं jQuery 3.1.1, Vue.js 2.0.1

उत्तर

34

मैं देख रहा हूँ कि आप Vue 2.0.1 का उपयोग कर रहे उपयोग कर रहा हूँ। वू 2.0 और उसके बाद कोई ready विधि नहीं है। https://github.com/vuejs/vue/issues/2873

ऊपर पेज में उल्लेख किया है, आप mounted बजाय ready उपयोग कर सकते हैं:

यहाँ सब Vue 2.0 परिवर्तन की सूची के लिए लिंक है।

कोई समस्या नहीं है, लेकिन केवल एक नोट: आप jQuery और Vue को बड़े पैमाने पर मिश्रित कर रहे हैं। आप केवल http संबंधित कार्यों के लिए jQuery की जरूरत है, आप के बजाय vue-resource उपयोग कर सकते हैं - https://github.com/vuejs/vue-resource

संपादित करें: अद्यतन पर vue-resource

के रूप में टिप्पणी में @EmileBergeron से कहा, Vue-संसाधन रास्ता वापस में समाप्त हो गया नवंबर 2016 स्वयं (vue-resource पर उस अंतिम पैराग्राफ के साथ मैंने यह उत्तर प्रदान करने के कुछ सप्ताह बाद)।

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

+0

हाँ, यह चाल है! आपके अतिरिक्त नोट्स और उपयोगी लिंक के लिए धन्यवाद :) – Pathros

+0

[_vue-resource_ को ** अक्षरों ** के पक्ष में आधिकारिक अनुशंसा सूची से निकाल दिया गया था।] (Https://medium.com/the-vue-point/retiring-vue -resource-871a82880af4) –

+1

धन्यवाद @EmileBergeron इसे इंगित करने के लिए। हां, हम सभी 'Vue.js' डेवलपर सर्कल में इस परिवर्तन के बारे में जानते हैं और इसे अपनाया है, लेकिन मैं इस विशेष उत्तर को बहुत लंबे समय से भूल गया था। मैंने अतिरिक्त नोट्स को शामिल करने के लिए उत्तर संपादित किया है ताकि भविष्य के पाठकों को स्वयं को खोजने के लिए समय बिताना पड़े। एक बार फिर धन्यवाद! – Mani

7

@ घटक है कि छिपा हुआ नहीं है पर mounted(){} काम करता है का उपयोग करने का मणि के सुझाव: यहाँ एक ही बारे में अधिक जानकारी है। यदि आप घटक में फ़ंक्शन चलाते हैं और v-if="" या v-show="" जैसी स्थितियों का उपयोग करके छिपा हुआ है तो updated(){} का उपयोग करें।

संबंधित मुद्दे