Update zum Wechsel mit Livewire?

Question

Ich habe diese Eingabetypnummer für qty:

Der HTML-Code:

<span class="qty-btn minus-btn" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
    <i class="fal fa-minus-circle"></i>
</span>

<input
    wire:model.lazy="quantity"
    wire:change="updateQuantity({{ $product->id }})"
    type="number"
    class="input-text qty text"
    title="Qty" inputmode="numeric"
    step="1" min="1" max="" lang="en"
>

<span class="qty-btn plus-btn" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
    <i class="fal fa-plus-circle"></i>
</span>

Ich brauche, wenn ich auf eine Schaltfläche klicke stepDownoder die stepUpaktualisiereqty

meine Livewire-Komponente:

class CartQtySection extends Component
{
    public $product;
    public $quantity; public function mount($product)
    {
        $this->product = $product;
        $this->quantity = $product->pivot->quantity;
    }

    public function updateQuantity($id) { user()->cart()->updateExistingPivot($id, [
        'quantity' => $this->quantity, ]); $this->emit('quantityUpdated');
    }
}

Answer 1

Versuchen wire:click

<span class="qty-btn minus-btn" wire:click="stepDown({{ $product->id }})"> <i class="fal fa-minus-circle"></i> </span> <span class="qty-btn plus-btn" wire:click="stepUp({{ $product->id }})">
    <i class="fal fa-plus-circle"></i>
</span>

in Compoenent

<?php

class CartQtySection extends Component
{
    public $product; public $quantity;

    public function mount($product) { $this->product = $product; $this->quantity = $product->pivot->quantity; } public function updateQuantity($id)
    {
        user()->cart()->updateExistingPivot($id, [ 'quantity' => $this->quantity,
        ]);

        $this->emit('quantityUpdated'); } public function stepDown($id)
    {
        $this->quantity++; $this->updateQuantity($id) } public function stepUp($id)
    {
        $this->quantity--; $this->updateQuantity($id)
    }
}