Vue.js AJAX call inside Modal

axios, bootstrap-modal, laravel, twitter-bootstrap, vue.js

Solution

You can try events

Add event listener in component:

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;
            });
        },
    }),

add emit line in function:

    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));

    }

And make `getCCDetails` function call only on `View Details` button click.

Problem

I am trying to have a modal pop up with details of a credit card. The details come from an AJAX request. For some reason the root Vue instance is updating but the component instance is not. This is what I currently have - HTML: ``` <!-- 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 JS: ``` <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> ``` For the output, Root instance has `cardid = undefined` and `message = the output` I want. My cardDetails instance has the `cardid` value correct but `message = undefined`.

Original source