Директива `wire:click`⚓︎

Livewire предоставляет простую директиву wire:click для вызова методов компонента (так называемых действий) при клике пользователя на определённый элемент на странице.

Например, дан компонент ShowInvoice ниже:

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Invoice;

class ShowInvoice extends Component
{
    public Invoice $invoice;

    public function download()
    {
        return response()->download(
            $this->invoice->file_path, 'invoice.pdf'
        );
    }
}

Вы можете вызвать метод download() из класса выше, когда пользователь нажимает кнопку «Скачать счёт», добавив wire:click="download":

<button type="button" wire:click="download">
    Скачать счёт
</button>

Передача параметров⚓︎

Вы можете передавать параметры действиям напрямую в директиве wire:click:

<button wire:click="delete({{ $post->id }})">Удалить</button>

Когда кнопка будет нажата, метод delete() будет вызван с ID записи.

Не доверяйте параметрам действий

К параметрам действий следует относиться как к данным HTTP-запроса и не доверять им. Всегда проверяйте права владения перед обновлением данных.

Использование на ссылках⚓︎

При использовании wire:click на тегах <a> необходимо добавить .prevent, чтобы предотвратить стандартное поведение ссылки. В противном случае браузер перейдёт по указанному href.

<a href="#" wire:click.prevent="show">Просмотреть детали</a>

Предотвращение перерендеринга⚓︎

Используйте .renderless, чтобы пропустить перерендеринг компонента после завершения действия. Это полезно для действий, которые выполняют только побочные эффекты (например, логирование или аналитику):

<button wire:click.renderless="trackClick">Отследить событие</button>

Сохранение позиции прокрутки⚓︎

По умолчанию обновление контента может изменить позицию прокрутки. Используйте .preserve-scroll, чтобы сохранить текущую позицию прокрутки:

<button wire:click.preserve-scroll="loadMore">Загрузить ещё</button>

Параллельное выполнение⚓︎

По умолчанию Livewire ставит действия одного компонента в очередь. Используйте .async, чтобы разрешить параллельное выполнение действий:

<button wire:click.async="process">Обработать</button>

Углублённое изучение⚓︎

Директива wire:click — это лишь одна из многих доступных обработчиков событий в Livewire. Полную документацию по её (и другим обработчикам событий) возможностям смотрите на странице документации по действиям Livewire.

Смотрите также⚓︎

Действия — Полное руководство по действиям компонента
События — Отправка событий из обработчиков клика
wire:confirm — Добавление диалогов подтверждения к действиям

Справочник⚓︎

wire:click="methodName"
wire:click="methodName(param1, param2)"

Модификаторы⚓︎

Модификатор	Описание
`.prevent`	Предотвращает стандартное поведение браузера
`.stop`	Останавливает всплытие события
`.self`	Срабатывает только если событие произошло на этом элементе
`.once`	Гарантирует, что обработчик будет вызван только один раз
`.debounce`	Добавляет задержку 250 мс (используйте `.debounce.500ms` для пользовательской задержки)
`.throttle`	Ограничивает вызовы до одного раза в 250 мс минимум (используйте `.throttle.500ms` для пользовательского значения)
`.window`	Слушает событие на объекте `window`
`.document`	Слушает событие на объекте `document`
`.outside`	Слушает только клики вне элемента
`.passive`	Не блокирует производительность прокрутки
`.capture`	Слушает во время фазы перехвата
`.camel`	Преобразует имя события в camelCase
`.dot`	Преобразует имя события в нотацию с точками
`.renderless`	Пропускает перерендеринг после завершения действия
`.preserve-scroll`	Сохраняет позицию прокрутки во время обновлений
`.async`	Выполняет действие параллельно вместо постановки в очередь

Директива wire:click⚓︎