के अंदर जेएस 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">×</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
है।
वू का कौन सा संस्करण है? और, $ सीसी चर क्या है? – Staszek
यह थोड़ा उलझन में है। आपको अपने $ सीसी के लिए एक उदाहरण जोड़ना होगा। नीचे एक टिप्पणी में आपने दावा किया है कि कई $ सीसी हो सकते हैं - इसलिए मैं कहूंगा कि आप कहीं भी लूप नहीं कर रहे हैं। क्या आप सुनिश्चित करते हैं कि $ सीसी-> कार्ड_आईडी शून्य नहीं है? –