Build a Recursive Component for Nested Comments in Vue.js and Nuxt

I created a comments page. When you click on any of the comments, it will load the page as an item and display the comments for that item. This will work on anything you click, or if you want to read through one of the ask questions, everything should work as expected.

Rather than live code, I'm going to walk you through this, since I'm reusing so many of the things we've already used. For example, a next link to item plus item.ID is the same as the user page we just set up. We created underscore ID, again the same as the user page.

In this item page, you can see that we are loading the item data from the routeparams ID, again just like the user page. Where this gets interesting is in the use of the comments. Everything up here is just displaying item information, item time, item buy, item URL, everything we've already looked at with just some different CSS classes.

This comment component, when we look at it, because we're passing in this ID from the item.kids, it checks to see if there are any replies to that comment. It needs recursion in there. In the comment component, which is created here inside the components folder, you'll actually see this component reference itself.

I'm inside the comment component and I'm using a comment component inside of itself. That sets up the recursion for us. You can do this by setting a name on your component and just referring to it by that name. You can see that each time we are using a margin left class, so you can see it indent, indent, indent every time we use that comment, and it recurses into it.

To help you understand what's going on, I left what you'll see on here as kids. This kids is an array of the replies or the sub-comments, whatever you want to call them. That's item.kids. The behavior here is that, once this item loads, you'll see this is a component, so use beforemount. Async data is not available in components. You have to use before mount.

We'll go ahead and fetch that item. Once it has mounted, we'll see if that has kids. If it does, we'll use the exact same process we use to load all the items, where we mapped to a bunch of promises. We await a promise. All of all the promises get the responses and map to the response.data. Then, just assign that to kids.

If you look at all these IDs, you can see that the replies, here's the first one, 401. The one that ends in 378 should be mixed. There's 378. You'll see that 401 had a kid of 440. There's 440. I just let that kids array display to help you navigate through the recursion of these comments. Everything else in here should be fairly familiar.

These classes are like border bottom, margin bottom four, margin bottom one just to keep things separated a bit. The item has an ID and buy. These items, instead of titles, they have text for the comments. Those are HTML, so we use the HTML directive to display them. Other than that, it's the same workflow where the comments link to an item page.

That item page is in underscore ID, so we can load that ID. Once that ID is loaded, we'll have data to populate the comments, so item.kids comes off that item. That comment component loads the item and checks to see if it has any kids. If it has kids, it just tosses those kids back into a comment, which is recursed inside of itself.