Display a User Data Page Based on id in Vue.js and Nuxt
Displaying data for a user who made a post or comment is a common scenario in app development. This lesson walks you through using user ids and setting up pages for the user to display the relevant information.
When I click on this user, I want to go to a user page, so let's go ahead and set that up, create a next link. Again, this is just item by. In my next link, I want to go to, and since I want to evaluate what's inside those quotes, I want to bind to it.
We'll navigate to /user/+item.buy. These are single quotes, because we're evaluating this whole thing into /user, and then that person's ID. Right now, you see these links. If I try and go there, nothing happens, but you see it formed the proper URL here.
We can set that page up if we go into our pages, create a new folder, call it user, and then here, create a new file. We'll call this ID.view. If I say template div, you've reached the user page.
At this link, you can see you've reached the user page. Any time I go to one of these users, it'll say you've reached the user page.
To load the user data, we'll set up the script and export a default object. I don't really need anything for the store, so I'll just use async data, meaning just load some data for this page. I'll import Axios from Axios so that I can load that.
I'll do this as async await. Then I just want to axiosGet. Let's just start with user/john.json. This will give us a response as usual, and then the user is response.data. We can just return an object where the user is response.data, which means that now we'll have a user available to us.
We can just say user.ID, and you can see that we get the ID of John. Or if I say user.created, pass it into my time since filter, you can see that John has been a user over 10 years. To get the proper user off of this, since the context is passed in, and the context has the route on it, I can just change the hard-coded John to route.params.ID.
This is because ID matches up with _ID here. This part of the URL automatically comes in as the ID. You can see that this guy has been on over a year. If I go back, click on this one, almost two years. This one, over four years.
I'll just add some basic styling to this, say padding all four. The code font has been a user. Then we have a nice, very simple user page that loads every time I click on one of these.