Laravel/Livewire Nested Input Fields Disappear on Page Load

Question

I am brand new to Livewire/Jetstream and trying to make a little inventory application to try it out. In my example below I'm trying to show inventory items from DB on a table with the ability to update the inventory name and quantity from the table without going to an edit page.

I have a nested foreach and when I render the page the input fields in the loop show the value and then disappear but the value is showing correctly in the HTML. Any help would be appreciated!

**Show Inventory**

namespace App\Http\Livewire;
use App\Models\Inventory;
use Livewire\Component;

class ShowInventory extends Component
{
    
    public $inventories;

    public function mount() 
    {
        $this->inventories = Inventory::orderBy('name')->get();
    }

    public function render()
    {
        return view('livewire.show-inventory');
    }

    public function name()
    {
        $this->name = $name;
    }

    public function update($id)
    {
        $data = $this->validate([
            'name' => 'required',
            'available_on_hand' => 'required',
        ]);

        $this->item_id = $id;

        $item = Inventory::find($this->item_id);

        $item->update([
            'name' => $this->name,
            'available_on_hand' => $this->available_on_hand,
        ]);

    }
}

**Show Item**

namespace App\Http\Livewire;
use App\Models\Inventory;
use Livewire\Component;

class ShowItem extends Component
{

    public $inventory;

    public function mount(Inventory $inventory)
    {
        $this->inventory = $inventory;
    }

    public function render()
    {
        return view('livewire.show-item');
    }
}

**Parent Blade**

<table class="table-auto">
 <thead>
  <tr>
   <th>Name</th>
   <th>Quantity</th>
   <th></th>
   <th>View</th>
  </tr>
 </thead>
 <tbody>
  @foreach($inventories as $inventory)
   @livewire('show-item', ['inventory' => $inventory], key($inventory->id))
  @endforeach
 </tbody>
</table>

**Nested Blade**

<form wire:submit.prevent="update({{ $inventory->id }})">
    <tr>
        <td><input type="input" wire:model="name" value="{{$inventory->name}}" /></td>
        <td><input type="input" wire:model="available_on_hand" value="{{$inventory->available_on_hand}}" /></td>
        <td><button type="submit">Save</button></td>
        <td>View</td>
    </tr>
</form>

if you are binding property from frontend don't need value attribute — Prospero
I am adding the value attribute to show the current values with the option to edit them inline on the table. — anthivity

Prospero Prospero · Accepted Answer · 2021-04-23T13:26:59


<form wire:submit.prevent="update({{ $inventory->id }})">
    <tr>
        <td><input type="input" wire:model="name"/></td>
        <td><input type="input" wire:model="available_on_hand"/></td>
        <td><button type="submit">Save</button></td>
        <td>View</td>
    </tr>
</form>

in component

public $name, $available_on_hand;

//....

public function getModel($modelID)
{
   $model = Inventory::find($modelID);
   $this->name = $model->name;
   $this->available_on_hand = $model->available_on_hand;
}

as you can see, always you call the getModel method, it bind to your properties the current values of model also you can edit them and save it. You can't use both, value attribute and the wire:model, that give you the conflicts you have now

Laravel/Livewire Nested Input Fields Disappear on Page Load

1 Answers