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

Директива wire:if в Livewire условно отображает элемент в зависимости от результата выражения — полностью на стороне клиента, без обращения к серверу.

Это аналог директивы x-if из Alpine, но она вычисляется относительно свойств вашего компонента, а не данных Alpine.

В отличие от wire:show, который управляет видимостью элемента с помощью CSS (display: none), wire:if полностью добавляет и удаляет элемент из DOM. А в отличие от @if в Blade, условие мгновенно переоценивается на стороне клиента при каждом изменении свойства — без каких-либо сетевых запросов.

Поскольку содержимое должно иметь возможность добавляться на страницу и удаляться с неё, wire:if необходимо использовать на теге <template>:

<template wire:if="expression">
    <div>...</div>
</template>

Сам тег <template> никогда не отображается — если выражение возвращает истинное значение, его содержимое напрямую добавляется в DOM сразу после него.

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

Ниже приведён пример использования wire:if для отображения запроса подтверждения удаления:

<?php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    public $confirmingDelete = false;

    public function delete()
    {
        $this->authorize('delete', $this->post);

        $this->post->delete();

        return $this->redirect('/posts');
    }
};

<div>
    <button wire:click="confirmingDelete = true">Удалить запись</button>

    <template wire:if="confirmingDelete">
        <div>
            <p>Хотите удалить эту запись?</p>

            <button wire:click="delete">Да, удалить</button>

            <button wire:click="confirmingDelete = false">Отмена</button>
        </div>
    </template>
</div>

Когда нажимается кнопка «Удалить запись», окно подтверждения мгновенно добавляется на страницу — присваивание свойств, например wire:click="confirmingDelete = true", напрямую обновляет состояние на стороне клиента без обращения к серверу. При отмене оно полностью удаляется из DOM.

Единственный корневой элемент

Как и в случае с x-if, тег <template> должен содержать только один корневой элемент.

`wire:if` и `wire:show`⚓︎

Обе директивы переключают содержимое на основе выражения, но работают по-разному:

wire:show изначально отображает элемент и переключает его CSS-свойство display. Лучше всего подходит для содержимого, которое часто переключается, или для элементов, которые нужно плавно показывать и скрывать.
wire:if не отображает содержимое, пока выражение не станет истинным, и полностью удаляет его из DOM, когда оно ложно. Лучше всего подходит для ресурсоёмкого содержимого или содержимого, которого вообще не должно быть на странице до момента необходимости (например, элементов с autofocus, валидацией или сторонними виджетами).

`wire:if` и `@if`⚓︎

@if в Blade выполняется на сервере — его переключение требует обращения к серверу и повторной отрисовки. wire:if выполняется в браузере относительно клиентского состояния вашего компонента, поэтому реагирует мгновенно.

Поскольку содержимое wire:if отображается на стороне клиента, оно отсутствует в исходном HTML, сформированном сервером. Если содержимое должно быть доступно поисковым системам или отображаться до загрузки JavaScript, вместо этого используйте @if или wire:show.

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

<template wire:if="expression">
    <div>...</div>
</template>

У этой директивы нет модификаторов, и её необходимо использовать на теге <template>, содержащем единственный корневой элемент.

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