2017-05-04 17 views
11

के अंदर जेएस AJAX कॉल Vue क्रेडिट कार्ड के विवरण के साथ एक मॉडल पॉप अप करने का प्रयास कर रहा हूं। विवरण AJAX अनुरोध से आते हैं। किसी कारण से रूट वू इंस्टेंस अपडेट हो रहा है लेकिन घटक उदाहरण नहीं है।मॉड्यू

<!-- View Card Details Modal --> 
<!-- Modal --> 
<div class="modal fade" id="ccdetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">View Card Details</h4> 
     </div> 
     <card-details cardid="{{$cc->card_id}}" :message="getCCDetails('{{$cc->card_id}}')"></card-details> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <!-- <button type="button" class="btn btn-primary">Save changes</button> --> 
     </div> 
    </div> 
    </div> 
</div> 

Vue जे एस:

<script type="text/javascript"> 
Vue.component('card-details', { 
    template: '<div class="modal-body">@{{message}}</div>', 
    // data is technically a function, so Vue won't 
    // complain, but we return the same object 
    // reference for each component instance 
props: ['message', 'cardid'] 
}), 
new Vue({ 
    el: '#ccdetails', 
    data: { 
    cardid: '', 
    message: '' 
    }, 
    methods: { 
     getCCDetails: function (id) { 
      console.log(id) 
      console.log('calling function') 
      axios.get('/card/'.concat(id)) 
        .then(function (response) { 
        this.message = JSON.stringify(response.data) 
        }.bind(this)) 
        .catch(function (error) { 
        return this.message = 'Sorry there was an error' 
        }.bind(this)); 
     } 
    } 
}) 
</script> 

आउटपुट के लिए, रूट उदाहरण cardid = undefined और message = the output मैं चाहता है

एचटीएमएल - यह मैं वर्तमान में क्या है। मेरे कार्ड विवरण उदाहरण में cardid मान सही है लेकिन message = undefined है।

+0

वू का कौन सा संस्करण है? और, $ सीसी चर क्या है? – Staszek

+0

यह थोड़ा उलझन में है। आपको अपने $ सीसी के लिए एक उदाहरण जोड़ना होगा। नीचे एक टिप्पणी में आपने दावा किया है कि कई $ सीसी हो सकते हैं - इसलिए मैं कहूंगा कि आप कहीं भी लूप नहीं कर रहे हैं। क्या आप सुनिश्चित करते हैं कि $ सीसी-> कार्ड_आईडी शून्य नहीं है? –

उत्तर

3

आप घटनाओं

कोशिश कर सकते हैं घटक में घटना श्रोता जोड़ें: में

Vue.component('card-details', { 
     template: '<div class="modal-body">@{{message}}</div>', 
     // data is technically a function, so Vue won't 
     // complain, but we return the same object 
     // reference for each component instance 
     props: ['cardid'], 

     data: { 
      message: '' 
     }, 

     mounted() { 
      this.$parent.$on("card-details:message", message => { 
       this.message = message; 
      }); 
     }, 
    }), 

ऐड फेंकना लाइन कार्य:

getCCDetails: function (id) { 
     console.log(id) 
     console.log('calling function') 
     axios.get('/card/'.concat(id)) 
      .then(function (response) { 
       this.message = JSON.stringify(response.data) 
       this.$emit('card-details:message', this.message) // <-- 
      }.bind(this)) 
      .catch(function (error) { 
       return this.message = 'Sorry there was an error' 
      }.bind(this)); 

    } 

और क्लिक बनाने केवल View Detailsबटन पर getCCDetails समारोह कॉल।

0

मैं फोन पर कर रहा हूँ क्षमा करें, यह प्रयास करें:

  • सेट अपने कार्ड विवरण

  • में :message="message" तो जड़ Vue तत्व, एक :cardid="{{$cc->card_id}}" जोड़ सकते हैं और भूल नहीं है cardid प्रो

  • फिर रूट उदाहरण में mounted विधि लागू करें और वहां से getCCDetails(this.cardid) पर कॉल करें।

  • getCCDetails अंदर सेट message संपत्ति

मुझे आशा है कि इस मदद करता है

+0

मैं आरोहित विधि में नहीं चलना चाहता था क्योंकि ग्राहक के खाते में 1-10 क्रेडिट कार्ड से कहीं भी हो सकता है और मैं पेज लोड से पहले 10 अनुरोध नहीं करना चाहता हूं। मैं अनुरोध विवरण बटन पर क्लिक करने के लिए अनुरोध करना चाहता हूं और मोडल पॉप अप करता हूं। इसके अलावा, रूट वू तत्व के लिए आप डेटा सरणी जोड़ने और कार्डिड = "{{$ cc-> card_id}}" वापस करने के लिए कह रहे हैं? – rbur0425

0

मॉडल अजाक्स कॉल के लिए नहीं है। आपके पास नियंत्रकों से अजाक्स कॉल होना चाहिए।

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

  • कोई संबंधित समस्या नहीं^_^