Vue.js AJAX call inside Modal

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.

I'm on phone sorry, try this:

• Set :message="message" in your card-details

• then in the root Vue element, add a :cardid="{{$cc->card_id}}", and don't forget cardid prop

• then implement mounted method in the root instance and call getCCDetails(this.cardid) from there.

• inside getCCDetails set message property

I hope this helps

Modal is not for Ajax calls.You must have Ajax calls from controllers.