⚠️ This lesson is retired and might contain outdated information.

Display Only Available Data in Vue.js and Nuxt

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 4 months ago

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.

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.

Julio
Julio
~ 6 years ago

It's needed to wrap the elements in a template to add the v-if?. can't it be directly in the element?

Artem Pasichnyk
Artem Pasichnyk
~ 5 years ago

As there is only one element, v-if can be added on it. Template element used to apply condition on group of elements.

Markdown supported.
Become a member to join the discussionEnroll Today