Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Therin's avatar

Livewire pass data to component & populate properties

Hi As i'm trying to make some projects to learn Livewire (without jetstream), i'm encountering some behaviours that i'm not sure of if i've implemented them correctly.

In a basic crud setup i still have a normal resource controller to make my routes with, from which i have excluded the ones that livewire will use like store, edit, etc.

So when i want to show a page for a crud item itself via my resource controller's show method, i'm not sure how to pass data to the livewire component.

Inside my resource controller the show method just does the following:

public function show(Post $post)
{
		return view('post.index', compact(['post']));
}

Then in my post index.blade.php file i do the following:

<div>
@livewire('show-post', ['post' => $post])
</div>

Inside my component i do the following to populate the input fields via the mount method:

class ShowPosts extends Component
{
			public $post;
			public $subject, $message, $user_id;

			public function mount(Post $post)
			{
						$this->subject = $post->subject;
						$this->message = $post->message;
						$this->user_id = Auth::id();
			}

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

I found that i have to populate the properties inside the mount method so that when i edit the post the properties also update upon saving, otherwise when i populate them inside the render method i have to refresh the entire page.

My question would be that if this is the correct way to pass certain data to a livewire component when it's not used as a full page component through a route?

The reason i also ask this is that when i set validation rules and try to update the post, if i let the validation fail on the $message property and let the validation pass on the $subject property, the $subject property will reflect the change if you print it out, untill the page refreshes then it reverts back to what is stored but not changed in the database record.

0 likes
8 replies
vincent15000's avatar

Yes it's a good idea, but you could avoid passing the parameter to the blade view if you directly display the livewire view.

You can also improve your code if you don't populate the properties inside the mount method (just delete the mount method and don't populate anything) and just modify your form view.

<input wire:model="post.subject" />
Therin's avatar

@vincent15000

So you mean in my resource controller, on the show method, to pass the livewire view instead? So the livewire view would render everything then, since i'm also working with a View Component for my layout.app?

And then i don't have to pass anything to the livewire, but in the show-posts component i just reference

public Post $post

And then can use

<input wire:model="post.subject" />
1 like
vincent15000's avatar

@Therin It depends on how you have written your code.

If you want to write a full Livewire application, you should better write your routes like this.

use App\Http\Livewire\ShowPost;
...
Route::get('posts/{post}', ShowPost::class)->name('posts.show');

You can see that instead of using a common Laravel controller, you can also use a Livewire controller. In this case you don't need to call the livewire component @livewire('show-post', ['post' => $post]).

Therin's avatar

@vincent15000

I switched to a full page livewire component and used the route model binding as per the documentation. However i am stumbling upon an issue with the validation when i try to update the data.

My livewire component now

class ShowPosts extends Component
{
			public Post $post;
			protected $rules = [
				'post.subject' => 'required',
				'post.message' => 'required',
			];
			public function render()
			{
				return view('livewire.show-posts');
			}

			public function update()
			{
				$this->validate();
				$this->post->save();
			}
}

in my livewire blade the data is then also bound like this:

<input type="text" wire:model.defer="post.subject" />
<input type="text" wire:model.defer="post.message" />

However, when i display the data outside of the form, and the validation fails upon submitting the form, the displayed data is still being updated with the value that was submitted in the form, untill i refresh the page.

How can i prevent that or set it so the original data keeps being displayed when validation fails?

1 like
vincent15000's avatar

@Therin When validation fails, the datas typed in the fields remain the data which have been typed in the fields, and not the original datas. That's the normal behavior.

Therin's avatar

@vincent15000 Oh ok, that's kind of unexpected ... because the new or changed data, which hasn't been saved, then reflects all over the page when you for example use modals to edit current data, which feels confusing from an end-user perspective.

I figured there would be some kind of behaviour similar to the "old" data that you can use as when you use controllers and form requests.

1 like
vincent15000's avatar

@Therin When validation fails, the user have the possibility to change some datas (perhaps something he has forgotten in the form, or an error which he can correct, ...), so it's logical that after a validation failure, the typed data remain in the form.

If you really need, after a validation fails, to refresh the form with the previous data (original data), you can probably do that in the controller.

Have a look at a previous post here.

https://laracasts.com/discuss/channels/livewire/how-to-repopulate-fields-in-form-from-old-within-livewire-components

Therin's avatar

@vincent15000 Yes, that is indeed logical, but the input fields in the form aren't that much of my concern or issue.

My issue is that when you have a show-post blade view, where you generally display the data like this on the blade:

{{ $post->subject }}

When a pop-up modal is used to edit the data, and validation fails, the normally displayed data like shown above, also changes. So if the user clicks away or closes the modal, the data is still reflecting what was typed in the form, and the original unchanged data is only shown again on a browser refresh.

Please or to participate in this conversation.