Обробка форм за допомогою `wire:click.prevent` у Livewire

Директива wire:click.prevent зупиняє стандартну поведінку браузера під час виконання методів компонентів Livewire. Цей модифікатор перешкоджає відправленню форм та переходу за посиланнями, що дозволяє уникнути перезавантаження сторінки під час взаємодії з користувачем.

При обробці відправлення форм або кліків по кнопках wire:click.prevent блокує стандартні дії браузера та виконує подію через Livewire. Це дозволяє створювати інтерактивні інтерфейси без перезавантаження сторінки чи спеціального JavaScript.

use Livewire\Component;
 
class UserSettings extends Component
{
    public $email = '';
    public $notifications = false;
 
    public function updateEmail()
    {
        $this->validate(['email' => 'required|email']);
 
        auth()->user()->update(['email' => $this->email]);
 
        session()->flash('message', 'Email оновлено');
    }
 
    public function render()
    {
        return view('livewire.user-settings');
    }
}

<form>
    <input type="email" wire:model="email">
    <button wire:click.prevent="updateEmail">Оновити Email</button>
</form>

Модифікатор .prevent викликає preventDefault() для подій браузера, зупиняючи відправлення форми і дозволяючи виконувати метод Livewire. Це дозволяє користувачам залишатися на тій же сторінці під час обробки їхніх даних.

Для інтерфейсів управління запасами wire:click.prevent обробляє оновлення статусу та редагування в рядку без порушення робочого процесу:

use Livewire\Component;
use App\Models\Product;
 
class ProductManager extends Component
{
    public $products;
    public $editingId = null;
    public $editingName = '';
 
    public function mount()
    {
        $this->products = Product::all();
    }
 
    public function toggleStatus($productId)
    {
        $product = Product::find($productId);
        $product->active = !$product->active;
        $product->save();
 
        $this->products = Product::all();
    }
 
    public function startEditing($productId)
    {
        $this->editingId = $productId;
        $this->editingName = Product::find($productId)->name;
    }
 
    public function saveEdit()
    {
        Product::find($this->editingId)->update(['name' => $this->editingName]);
        $this->editingId = null;
        $this->products = Product::all();
    }
 
    public function render()
    {
        return view('livewire.product-manager');
    }
}

<div>
    @foreach($products as $product)
        <div class="product-row">
            <input type="checkbox"
                   wire:click.prevent="toggleStatus({{ $product->id }})"
                   {{ $product->active ? 'checked' : '' }}>
 
            @if($editingId === $product->id)
                <input type="text" wire:model="editingName">
                <button wire:click.prevent="saveEdit">Зберегти</button>
            @else
                <span wire:click.prevent="startEditing({{ $product->id }})">
                    {{ $product->name }}
                </span>
            @endif
        </div>
    @endforeach
</div>

Цей патерн працює з різними HTML-елементами, включаючи посилання, де модифікатор запобігає переходу під час виконання методів компонентів:

<a href="#" wire:click.prevent="performAction">Виконати дію</a>

Директива інтегрується з системою валідації Livewire та іншими функціями, такими як стан завантаження. Валідація на стороні сервера відбувається перед обробкою дій, а індикатори завантаження з'являються під час виконання методів.

wire:click.prevent зменшує потребу в обробці подій JavaScript, зберігаючи при цьому чутливі користувацькі інтерфейси. Вона обробляє звичні патерни взаємодії через методи PHP, замість фронтенд-скриптів.