[FIXED] Modal component VueJs with laravel

Issue

I would like to remove something with a vuejs modal component and use a laravel route. So in my constructor, I have my destroy method. Someone can help me please ? I don't know how to proceed.

My modal vuejs component :

<template>
<button type="button" v-on:click="toggleModal()">Supprimer</button>
<div v-if="showModal"
     class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
    <div class="relative w-80 my-6">
        <!--content-->
        <div
            class="border-0 rounded-lg shadow-lg relative flex flex-col bg-white outline-none focus:outline-none">
            <!--header-->
            <div
                class="flex pl-5 pt-5">
                <h3 class="text-lg font-medium">
                    Modal Title
                </h3>
            </div>
            <!--body-->
            <div class="relative pl-6 pt-4 flex-auto">
                <p class="text-lg leading-relaxed">
                    Voulez-vous vraiment supprimer ?
                </p>
            </div>
            <!--footer-->
            <div class="flex items-center justify-end p-6">
                <button
                    class="text-red-500 bg-transparent border border-solid border-red-500 hover:bg-red-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button" v-on:click="toggleModal()">
                    Annuler
                </button>
                <button
                    class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button" v-on:click="toggleModal()">
                    Supprimer
                </button>
            </div>
        </div>
    </div>
</div>
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>

export default {
name: "modal-component",
data() {
    return {
        showModal: false
    }
},
methods: {
    toggleModal: function () {
        this.showModal = !this.showModal;
    }
},

}

My template.blade.php :

<div id="app">
            <modal-component></modal-component>
        </div>

My app.js :

import Vue from "vue"

Vue.component( "modal-component", require("./components/ModalComponent.vue").default )

const app = new Vue({ el: "#app", });

Solution

You have to use axios package in vue js and make route in Laravel Side to handle that request and do your operation like Create, Edit, Show and Delete`

Axios Package you can make HTTP request to server from vue js

Answered By - Apurv Bhavsar