Laravel Livewire - Lookup a table and return data

Question

I have set up a very simple project as I want to pass livewire an id and it to return some data from a table with that ID.

My basic page includes

@livewire('ShowData',['id' => 4])

I have a livewire component set up (ShowData) which is

public $id;
public function render()
{
    return view('livewire.show-data');
}

I can see the ID is passed OK

 <div class="text-center border-2 w-1/2 mx-auto bg-grey-200 my-4 px-4 py-4 rounded ">
    {{$id}}
</div>

4 comes up. So my next set was to add at the top of the show page

@php
    $fp =App\Models\FrontPanel::find($id);
@endphp

So far so good - I still get the number 4.

But when I replace showing the ID with

{{$fp->name}}

I get

Attempt to read property "name" on null

Any help appreciated! (There is a field name in the table BTW).

Jim · Accepted Answer · 2024-11-02 12:49:00Z

0

I have worked it out. The lookup must be before the render, unlike components which can be done on the blade file, so on the FrontPanel.php page I added in the render:

$frontPanel = FrontPanel::find($id);
return view('livewire.show-data', ['frontPanel' => $frontPanel]);

It works OK now.

answered Nov 2, 2024 at 12:49

Jim

634 bronze badges

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

Comments

Ahmad Rivaldi · Accepted Answer · 2024-11-11 09:39:08Z

0

You can do like this

@livewire('show-data',['id' => 4])

use App\Models\FrontPanel;

class YourComponent extends Component
{
    public $fp;

    public function mount($id)
    {
        $this->fp = FrontPanel::find($id);
    }
}

Or straight bind the eloquent data

@livewire('show-data',['fp' => \App\Models\FrontPanel::find(4)])

use App\Models\FrontPanel;

class YourComponent extends Component
{
    public $fp;

    public function mount(FrontPanel $fp)
    {
        $this->fp = $fp;
    }
}

Now you can access $fp in your view as usual

answered Nov 11, 2024 at 9:39

Ahmad Rivaldi

1

Collectives™ on Stack Overflow

Laravel Livewire - Lookup a table and return data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related