Getting Started Q&A

[00:00:00]
>> Can you have an else-if kind of, like a v-if and then v-else, v-else-if?
>> Yeah, you absolutely can. And so the question here is regarding can we extend the if-else statement? And absolutely, because when Evan and the team were designing the API for this, their goal really is to extend upon what you already know.

[00:00:20]
So if you have if-then-else, why not else-if? So in this particular case, let's just go ahead and for sake of, we're gonna do the same thing before, and this time, characterList.length. And then this time, we'll just make it even just to kind of showcase this. And then otherwise, we'll have a p element, a v-else says, there are odd characters, which is a funny joke, hahaha.

[00:00:46]
Anyways, [SOUND] so it's even right now. So we add this now and we add another one. Let's do Appa, refresh, boom. So it'll run through all the scenarios, and then at the last one. So generally speaking, from a performance perspective, you do probably wanna optimize for your most common scenario at the very top so you don't have Vue running through everything.

[00:01:11]
But otherwise, yeah, you can else-if, as long as you see fit, question here.
>> I would reach for namespacing characterList under this. Is there any gotchas with that?
>> Namespacing the characterList.
>> The character in this characterList.
>> This in this character, down here?
>> Up in the markup.

[00:01:31]
>> Okay, so you're saying you wanted to namespace this?
>> Yeah, I put it under this, cuz once you get inside the character, is character a local variable or is it on the parent object? So I tend to put character in this characterList, meaning, it's from the parent component or parent, in this case, the app.

[00:01:48]
Is there any gotchas inside of that?
>> I see, okay, so I'm trying to understand. So you're saying that because of the way it's kind of spelled out, it's kind of confusing? So you wanna be explicit about where characterList is being called on for the parent?
>> Yeah, adding this dot.

[00:02:02]
>> This dot, okay, [LAUGH] we have avoided that up until this point. Something that you'll notice is that we're not actually doing anything special as far as calling the data that's inside of the app, right? We have this characterList array, and all we're doing is saying, as we can see here, characterList, character.

[00:02:18]
We're basically naming things as we go. And it's because Vue is basically trying to do that step of abstracting away the things that you would normally have to define. So if this were JavaScript, you might have to be like, I have to call the app.data.characterList to be like I'm calling characterList.

[00:02:33]
But Vue knows that basically there are conventions in the way you kinda call things. So rather than having you explicitly define everything, it is trying to basically help abstract that away. But in the future, for those who wanna be more explicit, there are ways to kinda namespace that out a little bit more.

[00:02:49]
So we'll get into that later on. Cool, go for it.
>> So I mean, you could almost say that characterList is a global, in a sense, or global to the app?
>> Yes, at this point, yeah, especially once we start getting into components, cuz components obviously is a big part of frameworks these days.

[00:03:05]
characterList will become, well, hold up, let me backtrack. So your question here is regarding whether or not characterList becomes global to the entire app. And so it is global to the context in that specific rendering context. So in the case of this page, right, it has the characterList, it can show it.

[00:03:29]
When we start getting into components, it will have its own scope and it will be separate from the parent. So in that regard, you cannot expect characterList to just show up in any context. So in Vue, it tries to basically try to optimize for performance. There's a performance impact when it comes to making things global.

[00:03:47]
But more importantly, you have namespace polluting that often happens. And so Vue tries to protect you from that by forcing you to be explicit with what you want to be shared and what you want to be made global. So there are ways to make global variables in Vue.

[00:04:02]
But I would say most of the time, you're probably not doing that. And there are other ways you're trying to share data. So even in the instance of, say, the use case regarding a user being logged in, that's something that impacts a lot of different components. And so in the past, the first thing you might be tempted to do is say, well, I'll just make a global variable that says, hey, is the user logged in?

[00:04:20]
Cuz, I don't know, call it 30% of our code base uses it. But that also means 70% of your code base doesn't use it. And now it has this user logged in state that it has to either worry about or it might conflict for some other reason. And so Vue 3 in particular, especially with the composition API and composables, which I promise we'll cover in this workshop.

[00:04:39]
Allows you to then segment that to be very explicit that on the 30% that care about user logged in, great, drop it in. Otherwise, you don't even have to worry about it. And so, we'll definitely be talking about that, but does it help to answer your question? Okay, solid, did you have a question?

[00:04:56]
>> A small thing on your v-for.
>> Yeah.
>> The first and last equivalent, so you wanna do commas, but not on the last person. AngularJS would be first and last on your loop-
>> They had the first. Okay, so you seem like we want to render the list out as a string?

[00:05:12]
>> As a string with commas, but not on your last guy.
>> Got it, okay, so the question here is around if you want it to actually list the string of characters instead [LAUGH] that actually I would say, okay, there's a couple ways we could do this. With the information we have now, the v-for actually would probably feel a little bit clunky because, well, and let's show this.

[00:05:37]
So let's go ahead and do this. So with information we have here, if we wanted to have a p element here instead that, say, took a span of every character in characterList. List, yep, okay, then I'm gonna do the character.name, okay? So this should just give us a mash of things.

[00:06:08]
Oop, I did not close it, save. Okay, boom, right? But what we need is we need that comma space. But you're probably also thinking, okay, let me refresh this now. Okay, that looks better. But to your point, we need the ability to cut off the last part. And so, gosh, I think the way I would do this at first glance would basically be I would probably just actually do a pull.

[00:06:36]
No, I think I would just do another inline. Using only the techniques we have right now, I would say we have if characterList, or, okay. So we wanna pull out, okay, here's a great example of where we need the index of something, right? And so I'm gonna repeat this a lot because I think this is a core thing I'd like to see other APIs continue as well is that we build on what you already know.

[00:06:59]
And since we're in the for loop in JavaScript, we can actually pull the index out by just pulling it out as a second argument cuz this is the standard JavaScript API. So again, Vue really tries not to come in and reinvent things for you. Once you learn it, it's a convention we know, why not use it?

[00:07:14]
So then we can go index === characterList.length- 1. If that is true, empty string, otherwise, comma like this. And did I slightly do that off? I can't spell off by one, once again. And, autocomplete messed me up. Length, length, length, this, this, this, this, great, there we go.

[00:07:45]
So there are ways, though, if let's say that in your app that you wanna go ahead and do, you're constantly stringing stuff together and you want it to always leave off. There are ways you can create custom directives. So you could pass it in and it would do something specific.

[00:07:57]
Most of the time, I think what I've seen people do instead is that when we talk about computed properties in a little bit. That's usually something that people use a lot for these sort of computations, which we'll cover then. Does that help to answer your question, though? Yeah, but you're right, I think Angular did have some nice syntactic sugar for stuff like that.

[00:08:15]
So I would say that absolutely, that is a great callback.