带有 laravel 的模态组件 VueJ答案

【问题标题】：Modal component VueJs with laravel带有 laravel 的模态组件 VueJ
【发布时间】：2022-01-07 00:44:11
【问题描述】：

我想使用 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( “模态组件”，要求（“./components/ModalComponent.vue”）.default )

const app = new Vue({ 埃尔：“#app”， });

【问题讨论】：

抱歉，这里没有足够的信息。你想达到什么目的？
我想用模态从我的数据库中删除一些东西，但我不知道如何确保当我在模态窗口中单击删除时它会删除

标签： laravel vue.js

【解决方案1】：

你必须在 vue js 中使用 axios 包并在 Laravel Side 中制作 route 来处理该请求并执行创建、编辑、显示和删除等操作`

Axios Package 你可以从 vue js 向服务器发出 HTTP 请求

【讨论】：