Level 122
Is your button within a livewire component?
Aug 5, 2020
8
Level 1
Livewire $emit on wire:click
Hello,
I have a button that needs to $emit something on click. And since I am using Livewire in this project, I am using the wire:click function.
I have other buttons that is using the wire:click which also has a $emit in them. But for some reason, I can't see what I have done wrong, I have even copy/pasted one of he buttons that work...
<!-- show.blade.php -->
<span class="inline-flex rounded-md shadow-sm">
<button wire:click="$emit('deleteProduct')" type="button" class="...">
Delete
</button>
</span>
<livewire:delete-product :product="$product"/>
class DeleteManual extends Component
{
public $isOpen = false;
public $listeners = ['deleteProduct'];
public $manual;
public function mount(Product $product)
{
$this->product= $product;
}
public function deleteProduct()
{
$this->isOpen = true;
}
...
}
At this moment I am just trying to show something on the page, if $isOpen is true.
If I manually edit the default to true, it is showing up.
But button doesn't show it, if I click on it.
Level 1
No my button is just in my normal blade file.
But my other buttons isn't within a Livewire component either.
Level 122
wire:click and $emit will only work within the scope of a livewire component.
Elsewhere, use window.livewire.emit('deleteProduct') and trigger it from on-click or using alpine
4 likes
Level 1
Well, might be true.
Can't see why it is true, since I have buttons in a normal .blade file with the wire:click="$emit('...')"
But that was something I made before my 3 weeks of vacations, so can't remember if I did anything special.
And referring to Livewire's own docs: https://laravel-livewire.com/docs/events
There shouldn't be a different between wire:click="$emit('...')" and window.livewire.emit('...')
Level 1
I see it.
It does say "From a component" and that there are 3 methods to do so.
But I was trying method A and you are suggesting method C. So what I am saying is that there shouldn't be any difference between mine and yours, since both should be "triggered from the component"
But, I'll make your answer is best answer later as a token for my appreciation of your help.
I'll try a bit more and if your works or I get mine to work, I'll update the thread.
Either way, thanks for your help @snapey
Level 122
What I am saying is that in the first example of emitting an event the 'Template' in this case is not just any blade - its a Livewire component template
Level 1
Would love to be able to show you my other files, so you can see that I have the same code in another blade file, that isn't a Livewire component either.
But your code window.livewire.emit('deleteProduct') does work.
So I can't explain, why the wire:click="$emit... works in some files and not this one.
Anyway, thanks for your help @snapey - will mark your answer as best answer :)
Please or to participate in this conversation.