Join Michael Sullivan for an in-depth discussion in this video Rendering elements conditionally, part of Learning Vue.js.
- [Instructor] In this video, we're gonna look at our simple form one last time while we talk about conditional rendering. While the submit handler gives us a starting point for building a function to process the form input, it's not very slick visually. It would be nice if we could completely hide the form once the user submits their email address and display a thank you message instead. In order to accomplish this, I'm gonna add a property to data called submitted, a Boolean value which will start off as false.
Next, we can use this property along with the V if directive on the form element to tell Vue that we should render this form element only if the form hasn't been submitted yet. So if submitted is false, or if not submitted. Let's get rid of the alert now. And we'll have this method just change the value of submitted, and remember, I have to say this dot submitted equals true.
And now watch what happens when I refresh the page and submit. Everything disappears, which is not a great user experience. So we'll address that next. So underneath the form, I could add an element with V if submitted and a thank you message. And we'll give it a little margin up top. Now when we submit, at least we see some feedback here.
But there's one nice thing we can do when we have two mutually exclusive elements like these that are siblings. And that's to use V else on the second one. Now it doesn't need a condition since it's just the negation of the original condition. If we look at the elements tab in the dev tools, we can see that when we click the submit button, the form element is just yanked right out of the DOM.
It's not hidden with CSS. There's another directive we could have used here, called V show, which also expects a Boolean value. V else can't work with V show, though. So here we would have to use an explicit condition. V show equals submitted. But you can see that the result is gonna be the same. So if V show can't use V else, but the behavior is the same, why would we want to use this more verbose V show technique? Well, looking back at the elements tab again, the difference is that when the condition is not met, this element, the form element still exists in the DOM but it's hidden with CSS.
In our example, it doesn't matter much. But imagine that it requires a lot of computing to produce this form element and it could be toggled on and off repeatedly. You may wanna use V show to hide and display it with CSS instead of destroying it and recreating it repeatedly. That's the difference. One more quick thing I wanna mention about conditional rendering is the flicker effect that you might notice before Vue has had a chance to work its magic and hide the conditionally rendered element. If I press control R repeatedly, you can see that the thank you message is sometimes briefly visible when the page loads.
To fix this issue, we can use a directive that has the effect of hiding the element with pure CSS but is then removed once Vue is initialized. And this is called V cloak. By itself, V cloak does nothing except disappear once Vue is active. But if I just add a bit of CSS to this page we'll get the desired effect.
And we use square brackets here because this is an attribute not a tag or a class or an ID. And it's a good idea to make sure this appears before the elements you wanna hide, otherwise you'll still get the flicker effect before the V cloak style rule is applied. Now when I refresh repeatedly, I can't see the H2 content. In the next video, we'll look at integrating some real data from a third party API with our Vue application.
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI