F
Filament•5d ago
Pritbor

Re-rendering Livewire inside Custom Form Field

I have issue with my Livewire which I want to re-render whenever modal is triggered inside Custom Form Field. I am using Filament modal. Currently my livewire retains previous state even after i close the modal and re-opens the modal. I dont want to change field state but i want to re-render Livewire with its mount whenever i modal opens. Below is my code. 
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

    <div
        class="flex items-center justify-between w-full px-3 py-2 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg cursor-pointer"
        @click="$dispatch('open-modal', { id: 'job-category-select-modal' })"
    >
        {{ $getSelectedCategoryName() ?? 'Select Job Category' }}
        <x-heroicon-m-chevron-down class="w-5 h-5 text-gray-600" />
    </div>



    <x-filament::modal id="job-category-select-modal" width="lg">
        <x-slot name="heading">
            {{ $getSelectModalHeadingContent() }}
        </x-slot>

        <livewire:filament.categories.job-category-selection
            wire:model.live="{{ $getStatePath() }}"
            :modelId="$getModelId()"
            :modelType="$getModelType()"
            :isMultiple="$isMultiple()"
            :key="'job-category-selection'"
        />

    </x-filament::modal>


</x-dynamic-component>
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

    <div
        class="flex items-center justify-between w-full px-3 py-2 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg cursor-pointer"
        @click="$dispatch('open-modal', { id: 'job-category-select-modal' })"
    >
        {{ $getSelectedCategoryName() ?? 'Select Job Category' }}
        <x-heroicon-m-chevron-down class="w-5 h-5 text-gray-600" />
    </div>



    <x-filament::modal id="job-category-select-modal" width="lg">
        <x-slot name="heading">
            {{ $getSelectModalHeadingContent() }}
        </x-slot>

        <livewire:filament.categories.job-category-selection
            wire:model.live="{{ $getStatePath() }}"
            :modelId="$getModelId()"
            :modelType="$getModelType()"
            :isMultiple="$isMultiple()"
            :key="'job-category-selection'"
        />

    </x-filament::modal>


</x-dynamic-component>
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?