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
– Prospero, Commented Apr 23, 2021 at 1:29
I am adding the value attribute to show the current values with the option to edit them inline on the table. — anthivity
– anthivity, Commented Apr 23, 2021 at 12:41

Prospero · Accepted Answer · 2021-04-23 13:26:59Z

0


<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

answered Apr 23, 2021 at 13:26

Prospero

2,3922 gold badges6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anthivity Over a year ago

Thanks Propero. Is getModel a built in function or custom? How is it called and where does the $modelID coming from?

anthivity Over a year ago

Hey Prospero, Your answer led me down the right path to answer. I used your getModel in the mount function and it worked great! Thanks for your help.

Prospero Over a year ago

Good to hear that!.

Collectives™ on Stack Overflow

Laravel/Livewire Nested Input Fields Disappear on Page Load

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related