Best way to use multiple toggles

#1

Hi.

Im just working on a project where i’m using multiple toggles on an edit page using blade components.

Im looking for a way to set the toggle with one method rather than multiple methods. What would be the best way of doing this?

Heres what I have currently::

// Livewire Component

 public function toggleEdit(){
        ($this->toggleEdit === 1 ? $this->toggleEdit = 0 : $this->toggleEdit = 1);
    }


    public function toggleMagazines(){
        ($this->magazines === 1 ? $this->magazines = 0 : $this->magazines = 1);
    }


    public function toggleCatalogues(){
        ($this->catalogues === 1 ? $this->catalogues = 0 : $this->catalogues = 1);
    }

// Blade Component template
<x-forms.toggle-no-label model="magazines" value="{{ $magazines }}" toggle="toggleMagazines">

Cheers
Chris

#2

For bool types that toggle between true and false, you can use the $toggle helper in Livewire. All you need to do is define a public property in your component, something like:

public MyComponent extends Component
{
  public $editing = false;
}

Then in your component view use the wire:click event:

<button wire:click="$toggle('editing')">Edit</button>

Each time you click the button, the value of $editing in your component will be toggled.

#3

@Veleous Cheers for the reply.

That makes sense. I’ve added that for the toggling and help.

Cheers