时间戳

首页 > 解决方案 > Laravel livewire：你将如何实现等效于 Vue 的 v-if v-else

php - Laravel livewire：你将如何实现等效于 Vue 的 v-if v-else

问题描述

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

什么是等价的？

标签： phplaravellaravel-livewire

解决方案

你可以简单地这样做

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

推荐阅读