Livewire - Alpine Expression Error: Cannot read properties of undefined (reading 'find')

Question

@this.removeUpload('images', filename) is not working, giving error

Cannot read properties of undefined (reading 'find').

Here is my code -

<input type="file" class="form-control" name="images" id="images" wire:model="images" multiple>
<span style="position:relative;">
    <button type="button" class="close-btn" title="Delete Image" wire:click="@this.removeUpload('images','$images->getFilename()')">
        <span>X</span>
    </button>
    <img src="{{ $images->temporaryUrl() }}" />
</span>

Answer 1

I have modified my code wire:click with x-on:click, it’s working now. As x-on:click listen for browser click event that are dispatched on or within an element and wire:click fire click event from Livewire components.

<input type="file" class="form-control" name="images" id="images" wire:model="images" multiple>
<span style="position:relative;">
    <button type="button" class="close-btn" title="Delete Image" x-on:click="@this.removeUpload('images','$images->getFilename()')">
        <span>X</span>
    </button>
    <img src="{{ $images->temporaryUrl() }}" />
</span>