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

【问题标题】：Laravel livewire: How would you implement equivalent to Vue's v-if v-elseLaravel livewire：你将如何实现等效于 Vue 的 v-if v-else
【发布时间】：2021-01-19 17:34:46
【问题描述】：

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

什么是等价物？

【问题讨论】：

你试过@if($active) active @else disabled @endif吗？
不...在课堂上？
这就是 Livewire 的意义所在。你用刀片。如果 $active 发生变化，则视图部分将重新呈现，从而更改页面的该部分
当然，很明显它很疼。我在想它应该更像 Vue ......我整个上午都在试图弄清楚如何做到这一点
还有一个wire:click="$toggle('normal')"，可以让您排除该方法并直接切换该属性。尽管您的代码切换的属性与您检查的属性不同，但我猜这只是复制/粘贴错误

标签： php laravel laravel-livewire

【解决方案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>

【讨论】：

这太明显了，即使问这个我也觉得很愚蠢。我在考虑 Vue 类型，而不是刀片。非常感谢！
是的，我倾向于忘记简单的刀片功能。必须记住，Livewire 扩展了 Blade，它不会取代 Blade 所做的任何事情