Livewire pass the changed input value to the component function

Question

So I have a livewire component with multiple inputs in it. I'm trying to pass the value into the component so it can be saved and all fields updated after totals etc being done. Here is one of my inputs:

<input
    wire:change="update({{ $row->id }}, 'rate', {{ $row->rate }}"
    name="quote_{{ $row->id }}_rate"
    class="w-full"
    type="text"
    value="{{ $row->rate }}"
/>

This calls the update function in my livewire component

    public function update( $id, $type, $value ) {
        $item = QuoteItem::find( $id );
        $item->{$type} = $value;
        $item->total = $item->hours * $item->rate;
        $item->save();

        $this->quoteItems = QuoteItem::where( 'quote_id', $this->number )->get();
        $this->refreshTotals();
    }

However the $value is always the original; unchanged value and it then resets the element to what it was originally.

These inputs are in a table so there will be multiple rows with rate otherwise I'd just bind to a model right? So how do I pass the changed input into this function?

*** EDIT *** I initially had a livewire component would this be a better route with this than putting everything in a single place?

thanks

Answer 1

When I look at your code, the value of rate never changes. You're basically always passing the same value to this update function. If you want to get the changed value, I suggest using the magic $event variable:

wire:change="update({{$row->id}}, 'rate', $event.target.value)"

Just some other troubleshooting/tips:

• I suggest using wire:key on every row (if it's a foreach loop), so Livewire "knows" better when changes happen.
• You're missing a closing bracket ()) after your update call in your wire:change.
• I assume row->rate is always a numeric value? Else it should be between quotes.