Setting wire:model value with wire:click or alpine js?

Question

I am trying to create a custom dropdown to change the icon of a button with alpinejs since I can't have icons or styling with the default select and options html

This is the livewire code to update icon

public function updateTagIcon($id,$value)
    {
        $this->icon = $value;

        $this->validate([
            'icon' => 'required',
        ]);

        $this->tag->update(['icon' => $this->icon]);

        $this->tag=Tag::find($this->tag->id);

    }

Is there a way I can do @click with alpineJS to set $value=1 and pass that to livewire?

Or maybe there is a way to arbitrarly set this data with wire:click?

<div wire:click="updateTagIcon({{$tag->id}},'{{$value=2}}')">
  <button type="button">
     <svg> //</svg>       
     {{$tag->title}}           
  </button>   
</div>

Was thinking maybe to emit an event with alpine @click but still not sure how I would pass a value to update the $icon in livewire

I'm not sure I understand your question. But you can call Livewire methods from Alpine, for example through x-on:click="$wire.updateTagIcon(2, 1); which would effectively be the same as wire:click="updateTagIcon(2, 1). — Qirel
But the number 1, that you pass as the second paramteter. How would I identify that in livewire backend in the function as $this->icon = 1 — Jakub
NEver mind i am an idiot lol i was typing it in the wrong place. You soltion works wire:click="updateTagIcon({{$tag->id}},7)" — Jakub

Jakub Jakub · Accepted Answer · 2021-05-03T21:15:17

This is how to set values

wire:click="updateTagIcon({{$tag->id}},7)"

Than the livewire function looks like

public function updateTagIcon($id,$icon)
    {
        $this->icon = $icon;
    
        $this->validate([
            'icon' => 'required',
        ]);

        $this->tag->update(['icon' => $this->icon]);

        $this->tag=Tag::find($this->tag->id);

    }

Setting wire:model value with wire:click or alpine js?

1 Answers