Goal: Conditional UI Display 0:00Welcome to step 2. Your job in this lesson is to tweak just a few things. Here I have a very, very basic form. We have an error, a text area, and a submit button. Okay, your job is to only display this error message if the text area is empty. As soon as I start typing anything in, then I want to make sure that we do not display the error message. We hide it. Next, the same is basically true for the submit button. If we haven't typed anything in here, then I don't even want to display the submit button. But if we do, yeah, you're ready to send it, so activate or display the button. Okay, so if you're working along, you can hit pause and try this out for yourself. Otherwise, let's figure it out. Here's our main div wrapper. So we have a form with the error, the text area, and the submit button.and try this out for yourself. Otherwise, let's figure it out. Here's our main div wrapper. So we have a form with the error, the text area, and the submit button. Let's do the first step. If I want to use view to only display a message if the text area's value is empty, well, how do we do that? Or further, think about how you would have done it with jQuery. It ends up being pretty complicated, right? You end up doing this thing where you listen for key down on the text area, and then you check the text of the text area to see if there's anything there, and if not, then we make sure that we display this. But if there is something, then we can essentially set display none to the error message. It ends up getting kind of complicated for such a basic task, but with view, it's a non-issue. Check this Binding Textarea to Data 1:20can essentially set display none to the error message. It ends up getting kind of complicated for such a basic task, but with view, it's a non-issue. Check this out. We will bind the text area because we know we want to compare against its value. So I'm going to bind it, and we will call this message once again. Now, as a general good practice for any properties on your data model, you want to initialize them even if you only set them to an empty string, like this. New view. And first, we're going to bind the element to our wrapper div, so the div with an ID of app. And then next, I will initialize message to an empty string. This is a good practice to get into. Okay, so now we're tracking that, and further, if you want to see this like we did before, let's spit out the data property Showing Error with v-show 1:59This is a good practice to get into. Okay, so now we're tracking that, and further, if you want to see this like we did before, let's spit out the data property and filter it through JSON. Refresh. And now, as I type into this, we can see we're updating the value of message. Okay, so now, I want to only display this if message is empty. We do that like this. If we scroll up, here's a new directive you haven't learned yet. V show. And as you might have guessed, this just displays or hides an element, just using simple CSS. Display none. So I want to display it if we don't have a message. And what's cool about this is, within here, when we're using views directives, you can add any expression you want. Any basic expression can go here. Alright, so let's come back and refresh, and we see v-show vs v-if 2:43here, when we're using views directives, you can add any expression you want. Any basic expression can go here. Alright, so let's come back and refresh, and we see the message, as we should. But as soon as I add a letter, it hides exactly what we want. Okay, so V show, a good one to know. There's also V if. The difference is, if conditionally loads something based upon your expression, whereas show will just toggle the display. So for example, if I take a look at this right now, here's our span. But if we type something in, notice it completely removes the element from the page. You don't see the span at all. And if we delete that, you'll see it come back. Now, in practice, there isn't any huge penalty for this, but again, as a general rule of thumb, if you just want to toggle the display of something, thenback. Now, in practice, there isn't any huge penalty for this, but again, as a general rule of thumb, if you just want to toggle the display of something, then V show is what you want. So once again, if I type in now, notice we keep it, but we set style display none. And again, if we delete that, that will be removed if the message is empty. Okay, so now this ends up being pretty easy, right? You're gonna find this all the time with Vue. Things that, in the past, were kind of complicated, or at least annoying to accomplish, now are completely non-issues that even put a smile on your face. So now finally, for the submit button, we only want to display this again if we have a message. So I can say V show, or this might be a candidate for V if, in fact. It really just depends upon your Toggling Submit Button 4:01only want to display this again if we have a message. So I can say V show, or this might be a candidate for V if, in fact. It really just depends upon your needs. Let's stick with V show, though, and we'll say message. So now, in this case, we only display this button if message is not a falsy value. Alright, come back, refresh. We don't see the button, we do see the error. As we type, the error leaves, and the button displays. Excellent work, and in practice, without teaching this stuff, it takes you less than a minute.
