帶有 laravel 的模態組件 VueJ

Question

我想用 vuejs 模態組件刪除一些東西並使用 laravel 路線。 所以在我的構造函數中，我有我的銷毀方法。 有人可以幫助我嗎？ 我不知道該怎么做。

我的模態 vuejs 組件：

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

}

我的 template.blade.php：

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

我的 app.js：

從“vue”導入 Vue

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

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

Answer 1

您必須在 vue js 中使用axios package 並在 Laravel Side 中進行路由來處理該請求並執行創建、編輯、顯示和刪除等操作

Axios Package您可以從 vue js 向服務器發出HTTP請求