Besoin d'aide ?

livewire - modal - rendu dynamique

Avatar de Slobug
Slobug

Bonjour,

Je débute avec Laravel.

Mon appli : laravel 8, livewire, alpine js et tailwindcss

J'ai un problème de rendu....

j'ai un navbar dont le select permet de filtrer une liste de tâches. J'ai un livewire qui affiche une liste de tâches (filtrées) et ça marche...

et j'aurai voulu sur un click d'une tâche afficher un modal avec les données correspondantes. J'ai réussi une partie, le hic est lorsque je re-filtre la liste, les données ne sont plus les bonnes.

J'ai essayé cela avec un modal dans la page de rendu. Voyant que ça ne marchait pas j'ai essayé via un nouveau composant livewire mais j'ai du coup un autre problème avec les données retournées...

Je me suis appuyé sur cette article : https://tailwindcomponents.com/component/alpinejs-tailwindcss-lightbox-modal

bref je stagne grave ;)

mon code du modal après le premier div de la vue livewire :

<div x-data="{ fenetreModal : false, titre_de_la_tache : '', description : '' }">
        <template @fenetre-modal.window="fenetreModal = true; titre_de_la_tache = $event.detail.titre_de_la_tache; description = $event.detail.description;" x-if="fenetreModal">
            <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" x-on:click.away="titre_de_la_tache = '', description='' " class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75">
                <div @click.away="fenetreModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto">
                    <div class="z-50">
                        <button @click="fenetreModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none">
                            <svg class="fill-current text-white " xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                                </path>
                            </svg>
                        </button>
                    </div>
                    <div class="p-2">
                        <p x-text="titre_de_la_tache" class="text-center text-white"></p>
                        <p x-text="description" class="text-center text-white"></p>
                    </div>
                </div>
            </div>
        </template>
    </div>

Les appels (dans un boucle):

<a x-on:click="$dispatch('fenetre-modal', {  titre_de_la_tache: '{{ $i->title }}', description: '{{ $i->id }}' })" class="cursor-pointer" title="{{ $i->id }} - {{ $i->title }}"> affiche modal</a>

Dans le premier div de boucle:

x-data="{}"

Merci d'avance pour votre aide ;O)

Posté il y a 1 mois
Avatar de Slobug
Slobug

Bonjour,

il se trouve que j'avais placer mon x-data dans des positions qui ne permettaient pas de réinitialiser.

C'est résolu pour moi ;)

Posté il y a 1 mois

Vous ne pouvez pas répondre à ce sujet.