Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
04. Rendering a list of books

Episodes

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

Transcript

00:00
Okay, let's dive straight in and look at getting a real list of things on a page with LiveWire. So the first thing that we're going to do is delete this example component that we created.
00:10
Now, there's a couple of ways to do that. We could manually delete these files, or as we saw earlier, LiveWire gives us a load of commands that we can use. So I'm going to go ahead and delete this example component by just using the LiveWire delete command. And of course, I'm just going to choose yes. So that is that component destroyed.
00:27
And we can go ahead and remove that from the dashboard, or of course, we're going to see an error. Great. Okay, so over on our dashboard, I'm just going to reduce the size of the dashboard just to make this a little bit neater. And let's go ahead and first of all, just create our book model so we can get some data in our database. And then of course,
00:44
we'll get this output on the page. So we'll go ahead and make out a model here. And we're going to call this book, we'll create a migration and a factory alongside of that as well, just so we can generate out some fake data. Let's head over to our books migration. And we'll go down here and just fill out some information. So each of these books needs
01:03
to belong to a user. So let's go ahead and say foreign ID, user ID. And we'll go ahead and constrain that. And we need a title for each of our books. Let's fill that in. We also need an author. So that's just going to be a free string that we can type in here. And we also want some notes as well, like we saw from the introduction. So we're going to
01:24
go ahead and make them nullable too, because by default, we're not going to have any notes for that book. Okay, so pretty straightforward here. So let's go and say PHP artisan migrate. And sure enough, we should have our books table in there. Great. Okay, so over to the book model, just for the purpose of this, I'm going to go ahead and set guarded here to false just so we
01:45
don't need to add any fillable stuff in there. And we can start to create some stuff out. So we want a component here, which renders an initial list of our books from the database. So let's go over to our book factory, just so we can generate out some fake data in here. So the title is just going to be a fake sentence. And we'll just set that to six. And the author
02:10
will just say fake. And let's go and use the name method here to generate out just a fake name. So we'll go over to tinker just to generate out some fake books. And let's go ahead and say app models and book, grab the factory here. We'll choose how many times we want this. Let's just choose 10 for now. And we'll create them in the database. Okay, so yet user IDs and exist,
02:34
we'll need to provide my user ID in there. And we're good. Great. Okay, so now that we've done that we have got a list of books in our database. Let's output them with live wire. Now you can call your live wire components, whatever you want, but there tends to be a convention. For example, if we are creating a component that lists a bunch of stuff, we would give the name of that and then
02:55
add index on the end. So that's what I'm going to do in here. Let's go and make out a live wire component called book index. So that kind of makes sense. And as we already know, we've got a main class and a template, we can register this on the page straight away. So we can write book index. And notice that we're using a hyphen here to separate this. So we're kind of
03:19
referencing this, like we reference in the blade template. So obviously, at the moment, there's nothing on the page. But let's head over to our book index class and look at how we get these on the page. Now we saw from the last episode that we went ahead and created our property in here that held some information. And what we don't need to do in this case is create a property
03:39
to hold this public information. What we can do if we're rendering an initial list of items is just pass these down to the view method function, like we normally would within Laravel when we're passing these down to our blade templates. So we can just pass a list of books in here. It really doesn't matter. So I'm going to go ahead and grab the currently authenticated
04:00
user because we want to scope these to the current user. And we're going to access the books relationship, which we don't have at the moment. And then we're just going to scope these by the latest. And then we'll just say get. So let's go ahead and add in this relationship on our user so we can actually get these books. So we'll go ahead and create a really simple has many relationship
04:20
here. And we'll return this has many and book, like so. And we're done. Now we don't see anything so we're not outputting on the page, but we now have access to them within our blade file like we normally would within a Laravel application. So over to our book index template, we can now start to iterate over these. So let's just do this really basically for now. Again,
04:46
using blade, there's nothing different here. There's nothing special about grabbing this data. So we'll say for each books as book and end that for each. And then in here, let's just create our container. And just for now, let's output the book title, head over. And there we go. So we've got each of the book titles that we generated within the database. Now, there's nothing
05:08
special about what we're doing here at the moment. But the beauty of this is once we get to the point where we add more books, we can re-render or Livewire can re-render this list of books, which means that without refreshing the page, you will see an updated book. So once we get to the point where we are implementing the form, creating that book, that list of books will
05:33
update and we'll see a new book. So it just works like a standard JavaScript application. Okay, so what we want to do now is just very, very quickly style this up. So we want to make sure that this looks at least normal. So we're going to go ahead and grab the template just from the dashboard because we're going to get rid of that and have that for each of our
05:52
individual books. Each of these things that we're building is going to have a container. And I'm just going to go ahead and add this over in our book index where we're iterating through each of these. So this will go inside of here. Let's bring back that book title. And let's go and paste this in here and then just end that div off. So each of our books down the page is going
06:11
to be within its own container. And then we can just use space Y of say, two, just to separate these out. Obviously, it doesn't matter. But that's the general thing that we're going for. Okay, so let's just add a couple more styles in here. We'll go ahead and wrap this in an H2. And once we're done with this styling, we're going to take a look at actually refreshing
06:32
this component just to give you an idea of what's happening. So let's go and create our div in here and say by book author. And let's just style this header up. So it looks a little bit neater. So we'll set text to large font to medium, and we'll set the leading to snug here. So something that looks a little bit nicer. Okay, let's take a look at a really important concept.
06:59
Because if we head over to our book index here, we know that we're just dumping a list of books through to this template to use. But this render method will get called when something changes within this component. So I'm going to give you a really simple example of that now by clicking a button and invoking a method. So we're going to create a method in here. Let's just call this
07:22
create book, it doesn't really matter what it is, just for now. So I'm not going to actually do anything in here either. I'm just going to call this method. So let's go over to our book index. And let's just create a kind of fake button that simulates creating a new book, which is obviously eventually what we're going to be doing. Now we know how to call a method we use wire and click
07:41
depending on the event handler. And we just pass the name of the method inside of here. So when we click create book, nothing is obviously happening at the moment, because we're not actually creating a book. But when we do this, this list of books is actually updating now. Remember, we saw from earlier when we looked at our network tab, when I hit create book, what update is now doing
08:01
is re-rendering and rehydrating anything that we have passed down to that render method over in here. Now, this is a good thing. But it can also be a really bad thing. Because when we are doing things within a component, sometimes we don't want to refetch data. We'll talk about that later and how we can make this more efficient and make sure that we're writing components that are fast.
08:24
But for now, let's just take a look at an example of this updating. And I'm going to do that by just creating out a new record in here. So I'm going to say a new book. And let's just say by me. And let's go ahead and set now for the created update. So I'm going to go ahead and save this out. I'm going to come over to here. I've not refreshed the page or anything. But when I click
08:46
create book, let's just prove that this list of books re-renders. So I'm going to go ahead and click on that. And you can see sure enough, that new book has rolled in. So you can kind of start to imagine now what's going to happen when we implement the form, create the book in the database using that method. Livewire will then re-render that list of books for us and, of course,
09:06
show us that new data. So again, that is kind of what's happening behind the scenes and how that render method is actually working. We need to be really careful with this with the amount of data we pass down. A little bit later, we'll be looking at things like computed properties and how we can get around some of this stuff. But for now, that is pretty much it. Pass a list of books down.
09:25
When we do something, that list automatically gets updated. And that's the beauty of Livewire. OK. So we're going to go ahead and get rid of this create book method. And we'll get rid of this button because we're not going to need that. But there we go. We have a list of books on our page.

Episode summary

In this episode, we jump right in to building a real feature: rendering a list of books on the page using Laravel Livewire. We start by cleaning things up—deleting the default example component using a handy Livewire CLI command.

From there, it's time to set up our Book model, complete with its migration and a factory for generating fake books. We make sure each book belongs to a user and has the fields we need (like title, author, and notes). After running the migration and tweaking the model to make mass assignment easier, we use the factory in Tinker to quickly stuff our database with fake data.

Next up, we move on to displaying those books. We create a new Livewire component conventionally named BookIndex and hook it up to the dashboard. We fetch the list of books for the currently authenticated user and pass them straight into the component’s Blade view. The books are then output in a basic Blade loop—nothing special yet, just the titles for now.

To make things look a bit nicer, we transplant some styling from the dashboard and wrap each book in a styled container. Then, we illustrate how Livewire’s interactivity works: by creating a fake button that triggers a method, we see how Livewire re-renders the list by just clicking—no need to refresh the page. It's a glimpse of how Livewire seamlessly updates the UI when data changes.

The episode wraps up with a quick note on performance considerations (like being careful with how much data you re-render). But the big takeaway: we now have a live-updating list of books, and we can see the groundwork laid out for adding and updating books with Livewire in real time.

Episode discussion

No comments, yet. Be the first!