Vue.js

2015-12-11 29 views
6

के साथ तैयार होने पर बाल घटक में एपीआई डेटा एक्सेस करें, मैंने एक बड़े एप्लिकेशन पर काम किया है और मुझे अपने एपीआई से डेटा से निपटने में बहुत परेशानी हो रही है और इसे मेरे बच्चे के घटकों पर गुजरना है।Vue.js

स्थिति।

मैं माता पिता के घटक से मेरी एपीआई फोन कर रहा हूँ और मेरे बच्चे घटक के लिए एक आधार के माध्यम से डेटा गुजर। बाल घटक डेटा को ठीक दिखाता है, लेकिन मैं अपने बच्चे के घटक में तैयार फ़ंक्शन के भीतर डेटा तक पहुंच नहीं पा रहा हूं।

एक नज़र डालें: आप कंसोल में देख सकते हैं https://jsfiddle.net/kmrfkynf/3/

, बच्चे घटकों तैयार समारोह के भीतर डेटा प्रदर्शित करने के लिए मुझे एक खाली वस्तु देता है ...

ready: function(){ 
    console.log('items from child component', this.items); 
} 

... लेकिन बच्चे के घटक ऑब्जेक्ट को मेरे दोहराने के भीतर ठीक कर देते हैं।

तो समस्या यह है कि बच्चे के घटक माता पिता से API कॉल से पहले पूरा हो गया है प्रदान की गई है है। जब यह पूरा हो जाता है, तो यह डेटा को मेरे बच्चे के घटक में समन्वयित करता है, इस प्रकार यह ठीक से प्रस्तुत करता है।

मैं

क्या कोशिश की है मेरे बच्चे घटक के भीतर से प्रोप देखना। जब प्रोप 'पूर्ण' होता है तो मैं इसे एक्सेस कर सकता हूं। लेकिन यह प्रोप में कुछ डेटा संशोधित करने का प्रयास करते समय मुझे कई समस्याएं देता है, क्योंकि यह हर बार प्रस्तुत करता है। यह वह समाधान नहीं है जिसे मैं चाहता हूं।

सवाल

मुझे यकीन है कि प्रोप जब बच्चे घटक तैयार है भर जाता है कैसे कर सकते हैं?

+0

मैं एक ही मुद्दा हो रहा है, तो आप इस समस्या के लिए एक अच्छा समाधान मिला? –

+0

अभी मेरा डेटा तैयार होने पर प्रसारित करने के लिए ईवेंट का उपयोग कर रहा है –

उत्तर

1

समस्या यह है कि डोम भरी हुई और तैयार है, जबकि AJAX समारोह अभी भी डेटा प्राप्त कर रहा है है। तो सर्वर से परिणाम वापस आने से पहले घटक पर तैयार विधि आग लगती है।

आप कोई ईवेंट सक्रिय कर सकता है बच्चे को बताने के लिए डेटा सर्वर से वापस आ गया है जब:

var item = Vue.extend({ 
    props: ['items'], 
    data:function(){return{items:[]}}, 
    template: '<div v-for="item in items">{{ item }}</div>', 
    ready: function(){ 

    this.$on('datahere', function(){ 
     alert(this.items[0].id); 
     //console.log('datahere items', this.items); 

    }) 
    //console.log('items from child component', this.items); 
    } 
}) 

Vue.component('item', item); 

var items = Vue.extend({ 
    ready: function(){ 
    this.init(); 
    }, 
    data: function(){ 
    return { 
     items: {} 
    } 
    }, 
    methods:{ 
    init: function(){ 
     this.getItems(); 

    }, 
    getItems: function(){ 
     this.$http.get('https://api.github.com/users/mralexgray/repos') 
     .success(function(data){ 
      this.$set('items', data); 
      this.$nextTick(function(){ 
       this.$broadcast('datahere', data); 
      }); 

      console.log('items from parent components: ', this.$get('items')); 
     }) 
    } 
    }, 
    template: '<div class="test"><item :items.sync="items"></item></test>', 
    components: {'item': item} 
}) 

Vue.component('items', items); 



var app = new Vue({ 
    el: '#app' 
}) 
+0

यह वास्तव में समस्या है।मैंने अपने विचार को अपने विचार से संशोधित करने की कोशिश की है, लेकिन यह काम नहीं करता है। https://jsfiddle.net/kmrfkynf/5/ वस्तु फिर भी मैं) जोड़ा 'nextTick (' और 'भी items' सरणी प्रारंभ खाली –

+0

है। यह अब मेरे परिवर्तनों के साथ काम कर रहा है। –

1

@Douglas.Sesar के रूप में कहा, परिणाम से पहले item घटक आग पर ready विधि सर्वर से वापस आते हैं।

कि ठीक करने के लिए, तुम सब जोड़ने की जरूरत है activate hook है: हुक घटक प्रविष्टि से पहले कहा जाता है

var item = Vue.extend({ 

    activate: function(done) { 
    var unwatch = this.$watch('items', function() { 
     unwatch(); // teardown the watcher 
     done(); // ready to insert the component 
    }); 
    }, 

    props: ['items'], 
    template: '<div v-for="item in items">{{ item }}</div>', 
    ready: function(){ 
    console.log('items from child component', this.items); 
    } 
}) 

है। घटक done कॉलबैक कहलाए जाने तक तब तक सम्मिलित नहीं किया जाएगा। done कॉलबैक को कॉल किया जाता है जब items बदल गया (विवरण के लिए watch देखें)। इसलिए, ready फ़ंक्शन को कॉल करने पर items का सही डेटा होगा।

https://jsfiddle.net/kmrfkynf/8/

+0

वास्तव में एक बहुत अच्छा समाधान है। यह बात बताने के लिए धन्यवाद। मैं प्रत्येक एपीआई कॉल के लिए एक वॉचर बनाने के बाद बेहतर हो सकता हूं –