Introduction to Vue.js Challenge 1: Solution
This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Challenge 1: Solution" Lesson
>> Sarah: Let's go over the solution really quickly just in case people got stuck or weren't so into it, and wanted to see something. So if we look at the view instance, we've got that num1, 0, num2 is 0 and the name is an empty string. So let's look at the numbers first.
[00:00:20] In the inputs we just had span tags before were going to use input V model dot number. Remember we talked about those modifiers that we can use to make sure that it is a number input. We're also going to use, I mentioned semantic mark up, were also gonna use type number which is just normal each team out to make sure that it's a number.
[00:00:41] Then we have a normal span. So that's going to be, this is gonna connect to num1, which is currently 0, num2, which is currently 0. And then we're going to output in our moustache templates num1 plus num2, very expensive calculations we're running here [LAUGH]. And then we have a select, and on that select, we have a V model and that attaches to that empty string, that's name.
[00:01:08] And that will allow us to select, use one of these options that we get that become selected. And then we have a V-if, for the name, so that's not gonna show up until we've selected something. Remember if we have an empty string it won't be there in the DOM.
[00:01:25] And then my favorite kind of tag, tag, my favorite kind of taco, I'm thinking HTML and food, [LAUGH] is my stash template's name and that will output the thing that we selected in name.