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

Question

I'm trying to write my first examples using LiveWire, I want to do something as simple as...

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

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

I have built my example component with php artisan make:livewire sample, in the

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>

The component I only added:

public $active=true;

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

Of course, it doesn't work. I could use normal blade's directives, but my main interest in Livewire is to be able to change the DOM without reloading the page.

What would be the equivalent?

Answer 1

You can simply doing like this

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