Create a Conditionally Rendered Modal in Vue 3

Instructor: [0:00] When I click this Update button, I would like a Moodle to appear, that will let me edit the data that is available on my API. To enable that to happen, I'm going to have a div that's going to contain my form, which is here. At the moment, that's appearing all the time. Let's make it appear conditionally. To do that, I'll use the v-if directive, and I'll say, v-if showMoodle.

[0:23] Now, showMoodle doesn't exist yet, so let's create it in our script tag. To open out script tag, we'll say, const showMoodle = a referenced value and we'll start it with false. We need to import ref from Vue and then we need out addClick event to change the state. So let's make it do showMoodle = the object of showMoodle.

[0:47] Now, if I update, I can see my form. If I click it, it's clicking on and off. I'm going to give my div a class of Moodle. I'm going to create another div inside here, which I'm going to call div class of Moodle inner, and then I'm going to add some styling.

[1:10] For my Moodle class, I'm going to give it a position -- fixed, and set top to 50%, left to 50%, and give it a width of 600 pixels, set the height to 400 pixels, and I'll set a transform of translate -50% to -50%. I'll move it into the middle and give it a pretty high z-index, so give it a z-index of 1000. I've also set background to be white and given it a nice box-shadow.

[1:46] Let's see what that looks like now. Looks pretty good. Let's style the inner. I want this to be able to scroll. If the editor ever gets longer than the Moodle, I want it to be scrollable. I'll set it to be a position -- absolute as well.

[2:06] This time, it's top zero and left zero, because we wanted it to be at the top of the container that it's in, choose the Moodle, set width to 100%, and its height to 100%, and give it some padding. I'll set all overflow to auto, which will allow for that scrolling I was talking about. First page, looks a little bit better.