Display Only Available Data in Vue.js and Nuxt

You'll notice on the jobs page that some of these have zero comments. That can look kind of weird. If we just wrap this div in a template, then we can tack a v-if onto the template, checking to see if item.descendants exists. If it doesn't, you can see these all disappear. Because we're using CSS Grid, everything stays lined up correctly.

Now, the other one we haven't set up is each of these have a URL and you probably want to navigate to them if that exists. We can create our link here and we'll bind this to item.URL and then display the item URL.

Each of these are pretty long, so they take up too much space. Let's make it so we just have the host name. We can do that by creating another filter. I'm going to use a package again to help me out with this.

I'll install a package called URL. I'll import from URL a function called parse, then set up a filter called host name which takes in a URL and then returns parse URL.host name.

I can use my host name filter on the items now. We'll toss that in here, host name, hit save. You can see all of these are much cleaner. I'm going to go ahead and replace if this starts with www. just replace that with nothing. That'll just get rid of the wwws on some of these links.

If there's not a link, then we can wrap this in a template as well. I'll create a template. D-if this as well and just check on the item URL.

Because some of these are getting pretty long and I'm running out of space, I'm going to some of the font sizing. We'll bring the items down to F6, bring the URL font sizes down to F7, and bring this one down to F7 as well to match up with those sizes.