Alpine property not defined in Livewire component

Been staring at this for far too many hours now and can't work out why it's not working. The entire livewire component, slightly simplified is below:

<div class="overflow-x-auto">
    <flux:table>
        <flux:table.columns>
            <flux:table.column>Description</flux:table.column>
            <flux:table.column>Amount</flux:table.column>
            <flux:table.column>Status</flux:table.column>
            <flux:table.column class="flex justify-end"></flux:table.column>
        </flux:table.columns>
        <flux:table.rows>
            <!-- Form row for adding new booking fee -->
            <flux:table.row>
                <livewire:booking-fee.form :key="'booking-fee-form-new'"/>
                <flux:table.cell class="flex justify-end gap-1">
                    <flux:button type="button" size="sm" wire:click="$dispatchSelf('save')">
                        <x-font-awesome-icon :icon="Config('icons.add')"/>
                    </flux:button>
                </flux:table.cell>
            </flux:table.row>

            <!-- Existing booking fees -->
            @forelse ($booking_fees as $fee)
                <flux:table.row :key="'booking-fee-row-'.$fee['id']">
                    <div x-data="{ isEditing: false }">
                        <div x-show="! isEditing">
                          <flux:table.cell colspan="4">
                              Print fields...
                          </flux:table.cell>
                        </div>
                        <div x-show="isEditing" x-transition>
                            <flux:table.cell colspan="4">
                                Show edit form
                            </flux:table.cell>
                        </div>
                    </div>
                </flux:table.row>
            @empty
                <flux:table.row :key="'none'">
                    <flux:table.cell colspan="4">
                        No booking fees found. Add one above.
                    </flux:table.cell>
                </flux:table.row>
            @endforelse
        </flux:table.rows>
    </flux:table>
</div>

Issue is the x-data="{isEditing: False}" is not 'seen' by the elements it contains resulting in the JS error:

livewire.js?id=df3a17f2:1123 Alpine Expression Error: isEditing is not defined

Expression: "isEditing"

 <div x-show="isEditing" x-transition style="display: none;"> </div>

Any clue why this isn't working, as I'm fresh out of ideas. Seems such a basic case I can't figure out what's going wrong.

Snapey

11 months ago

Level 122

check that you are NOT loading alpine.js in your layout file

1 like

jhob101

11 months ago

Level 1

@Snapey Definitely not loaded in the main layout file. It's in a flux modal called from another flux modal. There is some alpine going on in the first modal.

Although I now think that the issue may stem from how I'm handling this inner modal, where the above code is from:

<flux:modal class="min-w-4xl" name="booking-form-modal" wire:model.self="showBookingFormModal" @close.self="resetForm">
        @if ($showBookingFormModal)
            @include('livewire.booking._form', ['assignment' => $assignment])
        @endif
    </flux:modal>

When this modal gets closed this error occurs:

livewire.js?id=df3a17f2:8564 Uncaught TypeError: Cannot read properties of null (reading 'before')
    at Block.appendChild (livewire.js?id=df3a17f2:8564:23)
    at patchChildren (livewire.js?id=df3a17f2:8385:21)
    at patchChildren (livewire.js?id=df3a17f2:8427:11)
    at patch (livewire.js?id=df3a17f2:8320:9)
    at patchChildren (livewire.js?id=df3a17f2:8476:9)
    at patch (livewire.js?id=df3a17f2:8320:9)
    at patchChildren (livewire.js?id=df3a17f2:8476:9)
    at patch (livewire.js?id=df3a17f2:8320:9)
    at patchChildren (livewire.js?id=df3a17f2:8476:9)
    at patch (livewire.js?id=df3a17f2:8320:9)

Which I think is probably due to the booking._form component getting removed from the DOM and causing issues with the DOM diffing.

Removing the @if($showBookingFormModal) causes another error, which is probably why it was there in the first place.

So I think my goal is now to work out a way to get rid of that condition, and then I expect that it will work again.

Please or to participate in this conversation.