Estoy haciendo es un contador de productos en un carrito de compras. Al agregar un producto debo incrementar el contador y decrementar cuando quito. Para eso he creado un componente livewire CartCounter con: php artisan make:livewire CartCounter
En app/Http/Livewire
tengo CartCounter.php
con éste código:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class CartCounter extends Component
{
public $count = 0;
protected $listeners = ['addProd' => 'increment',
'removeProd' => 'decrement'];
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.cart-counter');
}
}
Y en la vista del componente:
<div>
<div id="carrito" class="d-flex">
<div style="vertical-align: top">Carrito</div>
<i class="material-icons" id="iconCarrito">shopping_cart</i>{{ $count }}
</div>
</div>
Ahora bien, tengo 2 botones (fuera del componente CartCounter) para agregar y restar un productos, para sumar este:
<button wire:click="$emitTo('cart-counter','addProd')">+</button>
Y para restar este:
<button wire:click="$emitTo('cart-counter','removeProd')">-</button>
Se visualiza y se inicializa correctamente en cero pero luego al hacer clic en los botones no modifican el valor del contador y no me muestra ningún error, no sé qué me puede estar faltando.