Ouvrez le modal dans Blade en cliquant sur le bouton Vuejs

Question

Dans mon application Laravel Vue, j'ai une vue avec une table de données pour afficher certains enregistrements utilisateur.

Au-dessus de mon tableau de données, il y a un bouton pour ajouter des enregistrements.

Une fois que l'utilisateur clique sur le bouton, il devrait ouvrir un modal.

Mais mon modal est en lame.

Voici le code vue de mon bouton (view-docs.vue),

<open-overlay direction-from="top" identifier="addDocumentModal">
            <cs-button>
                Add document
            </cs-button>
        </open-overlay>

Mon modal .blade est,

<form
    method="post"
    action="{{ route('dashboard.profile.otherDocuments.store.manual', ['locale' => app()->getLocale()]) }}"
    enctype="multipart/form-data"
    ref="addDocumentModal"
>
    @csrf

    <overlay direction-from="top" identifier="addDocumentModal" open="{{ isset($add_another_documents) ? 'true' : null }}" >
        <div class="cs--dashboard-edit-modal w-full h-full absolute bottom-0 ">
            <div class="cs--modal-content flex">
                <div class="relative w-full">
                    <div class="cs--reveal-container bg-white w-full rounded shadow-soft mr-8 h-full">
                        <!--Modal title-->
                        <div class="flex justify-between items-center border-b border-certstyle-border px-10 py-3">
                            <h3 class="text-2xl leading-10 text-certstyle-titles font-bold my-2 flex items-center">
                                <span class="border-l-2 border-certstyle-orange inline-block h-6 mr-2"></span>
                                <span>{{ __('pages/other-documents.add-document') }}</span>
                            </h3>
                            <div class="h-full flex items-center cs--reveal transition-all duration-500"></div>
                        </div>

                        <div>
                            <!--Modal content-->
                            <div class="bg-certstyle-background-light w-full h-full px-10 pt-8 pb-10">

                                <!--Name-->
                                <div class="mb-5 relative z-30">
                                    <p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.name') }}</p>

                                    <div class="h-12 relative z-10">
                                        <input  value="{{ old('name') }}" name="name" id="add_name_input" type="text" class=" form-input w-full relative z-10" >
                                    </div>

                                    <validator identifier="addDocument" name="add_name_input" selector="id" rules="{{$validations['required']}}"></validator>
                                </div>

                                <div class="flex justify-between">

                                    <!--Completed at-->
                                    <div class="w-1/2 mr-2">
                                        <p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.date-of-issue') }}</p>
                                        <validator-v2 identifier="addDocument"  name="issued_at" rules="{{$validations['required']}}">
                                            <div class="h-12">
                                                <cs-date-picker value="{{ old('issued_at') != null ? Carbon\Carbon::parse(old('issued_at'))->format('Y-m-d') : '' }}"  id="minimumDate" name="issued_at"></cs-date-picker>
                                            </div>
                                       </validator-v2>
                                    </div>

                                    <!--Expiration date-->
                                    <div class="w-1/2 ml-2">
                                        <p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.expiry-date') }}</p>
                                        <validator-v2 identifier="addDocument" name="expires_at" depends-on-name="does_not_expire"  :rules="{{$validations['expiry_date_must_be_same_or_after']}}">
                                            <div class="h-12">
                                                <cs-date-picker value="{{ old('expires_at') != null ? Carbon\Carbon::parse(old('expires_at'))->format('Y-m-d') : '' }}" name="expires_at"></cs-date-picker>
                                            </div>
                                        </validator-v2>
                                    </div>

                                </div>

                                <div class="flex justify-between">

                                    <!--Completed at-->
                                    <div class="w-1/2 mr-2">
                                        <div class="mb-4">
                                            <label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
                                                <input type="checkbox" name="does_not_expire">
                                                <span class="checkbox--checkmark flex items-center justify-center ">
                                                    <svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                    </svg>
                                                </span>
                                                <span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/add-certificate.document-does-not-expire') }}</span>
                                            </label>
                                        </div>
                                    </div>

                                </div>

                                <!--Upload document-->
                                <div class="mb-1">
                                    <dashboard-input-label identifier="document" :settings="{help: true, helpDirection: 'left'}">
                                        {{ __('pages/add-certificate.upload-document') }}
                                        <template slot="helpText">
                                            Maximum filesize is {{ config('file-upload.max_file_size')  }} MB.
                                            The default allowed file extensions are: pdf, jpeg and png.
                                        </template>
                                    </dashboard-input-label>
                                    <validator-v2 identifier="addDocument" name="document_file" :rules="{{$validations['required']}}">
                                        <custom-file-upload :max-upload-file-size="{{ config('file-upload.max_file_size')  }}" name="document_file"></custom-file-upload>
                                    </validator-v2>
                                </div>

                                <!--Certificate number-->
                                <div class="mb-1">
                                    <p class="inline-block text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.document-number') }}</p>
                                    <div class="relative">
                                        <validator-v2 identifier="addDocument" name="document_number" depends-on-name="no_document_number" :rules="{{$validations['required_unless']}}">
                                            <input  value="{{ old('document_number') }}" name="document_number" id="add_document_number_input" type="text" class=" form-input w-full relative z-10" >
                                            <input-annotation identifier="document_number">
                                                {{ __('pages/other-documents.fill-document-number-1') }}
                                            </input-annotation>
                                            <label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
                                                <input type="checkbox" name="no_document_number">
                                                <span class="checkbox--checkmark flex items-center justify-center">
                                                        <svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                            <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg>
                                                    </span>
                                                <span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/other-documents.document-has-no-document-number') }}</span>
                                            </label>
                                        </validator-v2>
                                    </div>
                                </div>

                            </div>

                            <!--Modal actions-->
                            <div class="flex justify-between border-certstyle-border bg-white border-t px-8 py-8 relative ">
                                <close-overlay identifier="addDocumentModal">
                                    <div class="text-certstyle-text-light border-certstyle-border rounded border px-6 py-2  mr-4 hover:bg-certstyle-background cursor-pointer">{{ __('pages/add-certificate.cancel') }}</div>
                                </close-overlay>

                                <div class="flex justify-right flex justify-right space-x-5">

                                    <document-submit-button
                                        caption="{{ __('pages/add-certificate.save-and-close') }}"
                                        buttonclass="bg-white text-certstyle-orange border-certstyle-orange border rounded  font-bold px-6 py-2  cursor-pointer"
                                        name="saveAndClose"
                                        identifier="saveAndClose"
                                    ></document-submit-button>



                                    <document-submit-button
                                        caption="{{ __('pages/add-certificate.save-and-add-new') }}"
                                        buttonclass="text-white bg-gradient-br-orange rounded border font-bold px-6 py-2  cursor-pointer"
                                        name="saveAndNew"
                                        identifier="saveAndNew"
                                    ></document-submit-button>


                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </overlay>
</form>

Comment ouvrir ce modal lorsque je clique sur le bouton vue ?

Answer 1

Utilisez les événements jingle sur les boutons et les fonctions d'appel. La fonction qui lie le fichier router.js dans cette fonction.

Dans router.js, la fonction devrait ressembler à ceci,

{
    path: '/yourpath which is in api.php or web.php have',
    name: 'same as path name to remember easily',
    meta: { 
        requiresAuth: true,           //authentication require
        roles: ['superadmin','admin'] //roles to be define
    },
    component: () => import('../your vue file path/myFile.vue'),
},

Après cela, créez une route dans le fichier api.php et appelez la fonction du contrôleur. Affichez le code de votre fichier lame dans le contrôleur comme indiqué ci-dessous.

view('nom du fichier .blade');

C'est fait, merci.