3.2 Conditionally Displaying Slots

In the previous lesson we improved our modal components by using slots. Slots basically add place holders to our components so that we can supply content to those place holders. And in the previous lesson, we used three slots. One for our default content, which is the body of our modal. We have a named slot called title, for the title of our modal. Then we have a named slot called footer for of course the footer. And that's a huge step forward. I mean being able to supply whatever content that we need is definitely something that we want for a modal component. However, let's do this. If we don't supply a footer because, there's no guarantee that we would need a footer really a modal is always going to have a body. It may or may not have a title it may or may not have a footer. So if we remove the footer. Well, of course the footer is gone, but the marker is still there. If we inspect this, we're going to see that div element with a class of modal footer. And of course that makes sense because our footer slot is inside of that div element. So what we want to do then is conditionally show the elements that are named slots depend upon. Or a better way to say that would be to conditionally show the elements related to our named slots. And to do that we can use the slots property. Now let's do this let's go to our mounted hook, and let's say console.log and then we're going to log $slots. This lists all of the slots that were essentially passed to our component. So right now, we can see that there are two. There is the default slot which is of course the content, that's for the body of our modal. Then there's the title. And footer isn't listed here, because we took footer out. So we can use this $slots property in order to conditionally show whatever elements are related to the slots. So for the footer we can do this, we can use the if directive and we will just check the footer slot. If we have one then of course of this element is going to show. If not, it will be hidden. So if we show our modal, all of the markup related to the footer slot is not there. And that's exactly what we want. And we want the same thing for the title. So once again, we will add the if directive. We will use our slots property, we will check for the title but let's put this on multiple lines now so that we can read this. And of course we are still going to see the title because we included the title. However, let's get rid of the title. And let's just have our content so that now whenever we show our modal. We no longer have our title which looks kinda funky. But it is what it is, but we do have our content. So it's a very simple concept, we basically just use our $slots properly. We check to see if we have the appropriate slots. And if so it displays, if not, it is hidden.