Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
05. Passing data to pages

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So to do anything useful, we need to be able to pass data from our controller or just our routes down to our component. How do we do this? Let's head back over to the comment index controller.
00:11
And as a second argument through to this render method, we can just pass an array of data exactly the same as if you were using blade templates. So let's go ahead and pass a really simple string down here just to demo this out. And then we'll go ahead and build out the post model and actually send a list of posts down.
00:30
That we can iterate through. So I'm just going to output a really simple string in here. Hello. And that is under the key greeting.
00:37
So if we head over to our index file over on our comments, we want to go ahead and output this just inside of here. So the greeting needs to go inside of here. Now this data is not immediately available. If you're used to working with view, you'll know that you reference a variable like this, that you want to output in your templates.
00:56
If we head over though, notice that we don't see anything. Because this overall page is a view component, the data that we pass down here actually gets sent into this page as view props. So what we need to do is define out the props that we're accepting into this component before we start to use them. So let's go up to the top here where our script section is, and let's use define props to choose all of the props that we're accepting into this page.
01:25
So we know at the moment we just have a greeting and we know that that is a type of string. You can alternatively get rid of this object and just say greeting, but that doesn't give you that type safety that you have when you define out the type next to it. So we'll be doing this throughout the rest of the course. So now that we've defined the prop that we're accepting in from here, we now should see that output on the page.
01:51
So now, as well as rendering that page out, we're also accepting in all of them props to this page, much like you would do when you were building an API and then accessing that data. But you've not had to make a request to get this data at all. It's already implicitly come down into this component so you can just access it. So let's go ahead and work with a more real world example.
02:15
And that is, of course, a list of posts that we want to send down that we want to iterate through. So let's go ahead and build out a model in here called post. We'll create a migration and a factory alongside that as well. And let's very quickly fill in the post table.
02:31
Now, we're currently authenticated, so we're going to always assume that the user is authenticated. So let's go ahead and create out a foreign ID here with user ID. We'll go ahead and constrain this and then we'll go ahead and add in a very simple body to this message, as well as everything else that we get included. So let's go ahead and migrate the changes here.
02:53
We're going to head straight over to the post factory and just fill this in really quickly. So we basically want to just generate out a bunch of fake posts that we can use. So we want to fill the body in and we can use the fake helper here to go ahead and grab a sentence, maybe just 20 words in length. So if we head over to the post model, we're going to go down here and just add in fillable.
03:17
And then we should be good to generate out these posts and send them down to the view. So let's add body in fillable and we're good. OK, so we're going to come over to our database cedar so we can see these out. Let's come down here and let's say post factory.
03:33
Let's see how many times we want this to be created. So let's go ahead and create out just 20 for now. And we want this to be for a specific user. So in here, let's go ahead and say user create.
03:45
And then we're going to persist that to the database with create. And just before we run this, let's make sure we call factory properly. What we're also going to need to do is over in the post model, set up the relationship here. So we want to say that this belongs to a user.
04:02
And we should be good. OK, so everything should be set up now and we should be able to run this cedar to go ahead and get this to work. So let's go ahead and run PHP artisan DB seed. And there we go.
04:15
So now over in the database, we should have a list of posts by just one user, which is fine. So let's go ahead and just pass this data down into inertia and see what happens. So we'll start over in our comment index controller. We'll get rid of this greeting and change this to posts.
04:32
And then we're going to go ahead and just do what we would normally do to pass something down. So we're going to access the post, maybe scope it, order it, and then just grab a Laravel collection of this data. Now, when we pass a Laravel collection into something that needs it as a string, it will automatically convert this to JSON for us. So we don't need to do anything specific here.
04:54
Remember that we are accessing this data in JavaScript as either an object or an array. So we don't need to specially do anything here to get that to happen. It will be automatically cast for us behind the scenes. So we're going to head straight over to the index file here.
05:11
We're going to swap posts over, and this is actually going to be an object. We'll talk about this in just a second. Let's go ahead and just dump these on the page just to see what we get. So let's dump posts out here, head over and just give this a refresh.
05:23
And sure enough, you can see now we have got a list of all of these posts. Now, this is actually an array. So let's go ahead and swap that back to an array. We're kind of getting ahead of ourselves here.
05:33
And there we go. So we now have an array within JavaScript with all of the data for each of the models that we have within that post table. Now we can just go ahead and iterate through this like we normally would within Vue.
05:46
So we're going to go and just wrap this around here. So let's create out a wrapper div for this container and pull this in. So let's say V4 post in posts, and let's key this by the post ID. Vue requires that when we iterate.
06:06
And then here we now have the post within context. So we now have a container for each of our posts. So if you work with Vue for any length of time, this stuff will be pretty basic. I'm just going to go ahead and add a space Y of three in here just to separate these
06:21
out, and we now have a list of all of our posts. We can extract any of the data we want from this like normal because each of these things is an object. So for example, we could grab the post body and we just now see a list of all of that
06:33
data in there. So in conclusion, this is easy as you would normally expect. You just pass down the data that you want and accept that in as a prop here, give the type, and then just work with it like you normally would in the client side.

Episode summary

In this episode, we look at how to pass data from our backend controllers to our frontend pages/components when building an app with Laravel and Inertia.js. We kick things off by showing the basic way to send a simple string from the controller to the frontend, just like you would when using Blade templates. But, since we're working with Vue components, we also cover how you need to explicitly define the props you expect on the page to access that data correctly.

Once we have that simple example working, we move to something a bit more real-world: sending a list of posts to the page. We walk through creating a Post model, setting up the necessary migrations and factory, and seeding the database with some fake data. After the data is ready, we show how to fetch this list in the controller and send it down to the Vue component as a prop.

On the frontend, we demonstrate how to set up the prop, iterate through the posts using Vue's v-for directive, and output the post details. By the end of the episode, you'll see how easy it is to move data from Laravel into your Inertia-powered Vue components and render it however you need.

Episode discussion

No comments, yet. Be the first!