This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Display a User Data Page Based on id in Vue.js and Nuxt

    John LindquistJohn Lindquist

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss