Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Display Only Available Data in Vue.js and Nuxt

    John LindquistJohn Lindquist

    You often need to hide elements based on various conditions of your data. This lesson walks you through hiding the comments when no comments are available.



    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




    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 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.