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;
}

当然，它不起作用。我可以使用普通刀片的指令，但我对 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>