Laravel livewire: как бы вы реализовали эквивалент v-if v-else Vue

#php #laravel #laravel-livewire

Вопрос:

Я пытаюсь написать свои первые примеры с использованием LiveWire, я хочу сделать что-то такое же простое, как…

 <div v-if="active">
    Active things
</div>
<div v-else>
    Inactive things
</div>

<button @click="toggle" type="button">toggle</button>

Я создал свой пример компонента с php artisan make:livewire sample помощью, в

sample.blade.php:

 <div>
  <div wire:model="active">
    Active things
  </div>
  <div wire:model="!active">
    Inactive things
  </div>
</div>

<button wire:click="toggle">toggle</button>

Компонент, который я только добавил:

 public $active=true;

public function toggle() {
    $this->active = !$this->active;
}

Конечно, это не работает. Я мог бы использовать обычные директивы blade, но мой основной интерес к Livewire заключается в том, чтобы иметь возможность изменять DOM без перезагрузки страницы.

Что было бы эквивалентно?

1. Вы пробовали @if($active) active @else disabled @endif ?

2. Нет … как внутри класса?

3. в этом смысл Livewire. Вы используете blade. Если $active изменяется, то часть представления повторно отображается, изменяя эту часть страницы

4. Конечно, это было настолько очевидно, что это причиняет боль. Я думал, что это должно быть больше похоже на Vue… Я все утро пытался понять, как это сделать

5. Также есть wire:click="$toggle('normal')" , который позволяет исключить метод и просто переключить это свойство напрямую. Хотя ваш код переключает свойство, отличное от того, что вы проверяете, я предполагаю, что это просто ошибка копирования / вставки

Ответ №1:

Вы можете просто сделать так

 {{-- Don t forget to alway wrap the component in a div --}}
<div>

  <div>
    @if($active) Active @else Inactive @endif things
  </div>

  <button wire:click="toggle">toggle</button>

</div>

1. Это было настолько очевидно, что я чувствую себя таким глупым, даже спрашивая об этом. Я думал о типе Vue, а не о blade. Большое спасибо!

2. Да, я склонен терять из виду простую функциональность блейда. Нужно помнить, что Livewire расширяет Blade, он не заменяет ничего, что делает Blade