Laravel livewire：你将如何实现相当于 Vue 的 v-if v-else

Question

我正在尝试使用 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。

什么是等价物？

Answer 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>

Laravel livewire：你将如何实现相当于 Vue 的 v-if v-else

Laravel livewire: How would you implement equivalent to Vue's v-if v-else

php

laravel

laravel-livewire