'When the file selected for upload, livewire component is automatically rendering
Is there any possibility to stop Livewire rendering on each click event?
Actualy The issue is, if any event triggered from HTML or Javascript, then the render function automatically called from Livewire component in Laravel.
It seems if any third party tool initialized in HTML then it will again triggered the render function.
How to avoid this? Any help
Solution 1:[1]
In such case, you need to use Deferred Updating.
in cases where you don't need data updates to happen live, Livewire has a .defer modifer that batches data updates with the next network request.
For example, given the following component:
<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>
As the user types into the field, no network requests will be sent. Even if the user clicks away from the input field and onto other fields on the page, no requests will be sent.
When the user presses "Search", Livewire will send ONE network request that contains both the new "query" state, AND the "search" action to perform.
This can drastically cut down on network usage when it's not needed.
Solution 2:[2]
use prevent event modifier inside the button
<input type="text" name="text_field_name" wire:model.defer="search_txt" />
<button type="button" wire:click.prevent="yourFunction">Seacrh</button>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Digvijay |
| Solution 2 | Kalana Mihiranga |