Rendering Array Data 0:00Welcome to step 3. So we have a container div here, that I have bound a Vue instance to, and then I have a empty data object. So now we've learned that I can set anything here, and then echo it out within my Vue, using this mustache-like syntax, like so. So if I view that in the browser, sure enough it will say bar. And you can set as many as you want, of course. Easy enough, right? But what about maybe more complicated data structures? Maybe even something like an array? What if I want to filter through an array and display each item on the page? Fairly common, and as you can imagine, once you start making AJAX requests, you're probably going to receive responses exactly like that. Okay, so why don't we, let's just stick with simple names. Very easy. Joe, Mary, Jane, and Jack. How might we say, for each item in this array, Looping with v-for 0:43Okay, so why don't we, let's just stick with simple names. Very easy. Joe, Mary, Jane, and Jack. How might we say, for each item in this array, I want to echo it out within listItem? Okay, we can use v4. Once again, this is a directive, and we know that it's related to Vue, because it begins with v-. So I could say v4 names, but what do I want to call each one of these? How about just simple name? So how about this? For each name and names, well, yeah, I could do this. That would be fine. Let's come back and give it a refresh, and we get all of the items here, which is great. But also, if you want, you can use some additional directives, like vtext. So if I wanted to say vtext equals name, that will automatically set the text content. So if we come back and give it a refresh, that will work too. And do note, both of these options are fine. Demonstrating Reactivity 1:28that will automatically set the text content. So if we come back and give it a refresh, that will work too. And do note, both of these options are fine. Now again, I want to keep pushing this idea of reactivity. We have reactivity here, because we're using Vue. So that means if I open up Chrome DevTools again with shift command c, let's go to Vue. Notice it's saved to vm0 once again. So I could say vm0 to access our Vue model. Or by the way, you could always just say var app. And now, because we're in the global scope, if I come back, I can now type app, and I get the same thing. Okay, but in real life, these probably won't be global. Anyways, let's update our list of names by simply saying names push susan. Alright, so once again, it's reflected in the Vue. We push to our data, we have reactivity in place, so the Vue automatically re-renders in as few cycles Adding Input to Append 2:10push susan. Alright, so once again, it's reflected in the Vue. We push to our data, we have reactivity in place, so the Vue automatically re-renders in as few cycles as possible, or repaints as possible. We're starting to get a little more comfortable, so why don't we add an input where the user can simply append a name to the list? Very easy, but good for learning. Okay, so let's say this input, we can skip the name part. So let's figure out what we want to do. When I type into this input, and then maybe if I click on a button that says add name, well, what should happen? The value of this input should be appended to the names array. And because, again, we're using Vue, that should automatically refresh the DOM. It sounds like we need an event listener, right? When you click on this button, append to the list. Okay, well, we haven't learned about events just yet. I'm going to cheat a little bit. I'm going to Manual Click Event Handler 2:55like we need an event listener, right? When you click on this button, append to the list. Okay, well, we haven't learned about events just yet. I'm going to cheat a little bit. I'm going to show you the long form way, and then in the next episode, I'll demonstrate how much easier Vue makes the process. So we might say something like this. Once again, document.querySelector, we're just going to give this a generic name like button. And we'll say addEventListener, click. When it's clicked, what do we want to do? Well, we'll simply grab the input. Once again, notice how we're defaulting back to diving into the DOM and fetching some values. As a general rule of thumb with Vue, when you feel yourself reaching for that, and we all do it, it's how we learned it with generic JavaScript and especially jQuery, so it's easy to fall back into that. When you do, maybe take a step back and think, is there a more data-centric way I can do this?learned it with generic JavaScript and especially jQuery, so it's easy to fall back into that. When you do, maybe take a step back and think, is there a more data-centric way I can do this? But again, we'll stick with this until the next episode. Anyways, when you click on the button, we're going to, once again, document.querySelector, input, grab its value, and then push to this array, like so, app.names.pushName. All right, so fairly clumsy, but this would work. So we'll say, once again, susan, addName, and it does work. But now we have the issue where the input hasn't been cleared. So maybe we can do that as well. Maybe this, name.value, and then ultimately say name.value equals an empty string. Okay, refresh, susan, click, it adds, and then removes the input. Frank, click, Jeff, click, you see how that works. All right, so a lot of improvements could be made here. To finish up for this episode, though, Using Mounted Hook 4:25click, it adds, and then removes the input. Frank, click, Jeff, click, you see how that works. All right, so a lot of improvements could be made here. To finish up for this episode, though, why don't we just merge this with our view model so it feels more contained? I'm going to use a special method here called mounted. It's going to be triggered by view once the instance has been mounted. Or, you know what, it's easier to just think of it as once everything's ready to go. Once our events have been registered, once everything has been bound, once we're mounted, we're ready to go, then what do you want to do? Let's just say alert ready. Refresh, and we get it. So again, notice this will automatically be called. So now, yeah, we could take this and push it inside of the mounted hook. Now, at the very least, everything is contained. So refresh, susan, add name, and it works. Okay, good job. But in step four,we could take this and push it inside of the mounted hook. Now, at the very least, everything is contained. So refresh, susan, add name, and it works. Okay, good job. But in step four, we're going to clean this up drastically. I'll see you then.
