How to edit fields from data tables input field

#1

I have Products table. I have followed Laracasts tutorial for building a data table view of all the products.

What would be the best practice to edit some product fields from the data table list?

I imagine it like having an input fields for some columns and by leaving the input field, the save action would trigger.

I tried to do this on the input fields:

@foreach ($products as $product)
    <input type="text" value="{{ $product->price }}" wire:model.lazy="price.{{$product->id}}">
@endforeach

Ideally I would like to define trigger action on the input leaving. Like with button click I can call method: updatePrice({{$product->price}})

So, I was thinking about hooking on the updatingPrice/updatedPrice, but none of them triggered. It seems like these property hooks are not triggering on the nested properties/arrays correctly? It’s coming in the format “price.5” and updatedPrice expects “price”

How would you solve these things, please?

#2

I think I would do something like this:

@foreach ($products as $product)
    @livewire('product-form', $product->id)
@endforeach

product-form-blade.php

<div>
    <input type="text" wire:model.lazy="price">
</div>

ProductForm.php

class ProductForm extends Component {
    public $product, $price;
    public function mount($product_id) {
        $this->product = Product::find($product_id);
    }
    public function updated($name, $value) {
        $product->$name = $value;
        $product->save();
    }
    public function render() {
        return view('livewire.product-form');
}

(haven’t tested this, just a quick written down brain fart)

1 Like