Input fields

- [Instructor] One of the features that makes Vue.js super helpful is how it handles user input. And to do that, we use a directive called V-model. Now the job of V-model is to update user data based on the user input. So if somebody interacts with one of the form elements, like input fields, text area, or select elements, it will tie the data to these fields, and when you change one of the fields, it will modify the data as well. Now this is a relationship called two-way data binding. And that means that when you modify the form element, it will also update the data in your application. But also that if for some reason, the data changes, the form will update as well. Now V-model sometimes ignores values on input fields. However, they might be useful when working with multiple checked or selected properties on form elements. We'll cover some examples in just a minute. Now Vue.js will also generate properties and events when things change depending on the type of form element. Let's go ahead and check out a simple version of how this works. Now here we have a normal input field, and we have a variable in our application called max. You can see that right here I have the V-model attribute. And whenever I modify the maximum price here, it automatically updates in the template, and that's being output by this expression. Now, if something in my application were to change the value of max, both of these will automatically update, and that's pretty magical. You can also add some modifiers to change how the model works. There are several of them, you can see that there's a lazy attribute if you want the field to update after a changed event happens, instead of an input event. So for example, in a text field, you would have to press the Tab bar or the Return, in order for the variable to update. Text fields are assumed to be strings by default, if you're sure you want a number, you can use the .number modifier Finally, trim will get rid of any extra white space the user enters. Now expressions don't work inside text area, so you might be tempted to do something like this and put in an expression to output the value of the variable. Technically, you should do this by adding the V-model inside the text area field, like this. Now check boxes are pretty complicated. So in the simplest form, it allows you to create a Boolean variable to track whether or not an item is checked. And you can also use an array for multiple input fields. And that allows you to track how people check different input elements. So here's the basic way that you use them. You can add a V-model tracking a variable. And then optionally you can also specify what happens when somebody checks on the input field, and in this case, it would send a true value of MyVal0ne, but this could be anything like a number, or anything else that you want it to pass. And then if you want it to automatically send a value to this myVar variable, then you would just put that value here. If you're trying to have check boxes automatically go to a single array, then you can use the V-model and pass it along the name of an array. So here we're passing the same array name to all of these different input fields, however, we are sending different values. What would happen would be that those values, as the form was checked, would get passed along into an array, so it would get a value like this. And if you clicked on the second one then it would have the value of second. We'll see some examples in just a minute. Finally, you can also of course use radio buttons, and that's pretty similar to what happens with arrays You use the same variable name, but you don't use an array, and a single value would get captured. So you pass along a variable like this to each one of these, the variable gets assigned different values based on the value field. So when you define this, you would just receive a different value for the same variable. This is worth a look. So let's go ahead and try it. So here we have some different check boxes, as well as radio buttons. And so what I want to show you is how you do a basic check box. Here we are having this particular check box track a variable called displayLabels. Now notice that, although right now displayLabels is set to fouls, this item right here is actually checked. That's because I included the checked field right here. And that's actually going to create a problem, because although the field is shown as checked, the value of displayLabels is false. So what you should do in this case, is just delete this checked value here, and Vue.js will automatically pick whether or not the form shows the item checked, based on the value of your variable. So if you want to start this form out with this item already being checked, you want to create the variable, and then you want to assign it a true value, notice that right here is when I am outputting the value. So here is displayLabels. Right now it has a value of True, because that's how I initialized it. But if I switch it back to False, how I had it before. And I still have the checked element. So here, the check box is checked, but the variable has a false value. So this is the more correct way of doin' it, don't add a checked here, create the value of the variable with the true or false. And you can see that now, the value right here matches what is in this variable, so if I want to turn that on, we'd set it to true. And this form will automatically update, and the displayLabel value would be true here. Now here's what happens when I want to pass along a value. So here, I have another variable here called withValue. And if I click on this, you'll see that it gets an item called Value One. That's because this input field has this false value right here of Value Two and true value of Value One. So when this checkbox is clicked, the variable outputs as value one, and if I un-click it, it outputs as value two. However, when this form first loads, notice that withValue doesn't have any value in it at all. Which means that this is an instance where you may want to use a radio button, because they can have default values in them. Alright, let's take a look at multiple check boxes. Here we are putting these in a variable called myCheckboxes. Right now, this is defined as an array right here. And notice that we're also assigning that to that one, as well as to this one, and we're assigning different values, this first one gets first. This second one gets the value of second. And this last one gets a value of third. And here I output the value of this array. So let's go ahead and click on these and see what happens, so notice that the third one gets added to this array. Then the second one, and then the first one. And the order that I click these on is going to be the order that these get added to my array, so it's got to be pretty smart about how that works. Now let's take a look at the radio buttons. Similar thing here, we are creating a V-model of my radios. And here it is, notice that to have the second one automatically select it, I'm passing along the value that matches the value that is right here in the template. And Vue.js is going to be pretty smart. However, make sure that the values are capitalized the same, otherwise it's not going to know that it needs to match those two, so be careful with capitalization. If you wanted this to start out as empty, then you would pass along a null value that would work. And then when somebody clicks on any one of these, then the value of that variable would change to the appropriate name. Alright, so, you can also, of course, use Select Elements, and you would add a V-model in the Select tag, it has some pretty smart options as well. Here's what that would look like, you create a V-model with the name of some variable. And when you want to create an option that doesn't have a value, you pass along something like this. You could even pass along disabled here. And that would make sure that this value is not automatically chosen, or if it is sent, that it would send an empty value. And then if you don't add a value attribute, it's just going to read whatever is between this option parameter, and send it as the result. If you do pass along a value, it would ignore what the label is and send whatever you put in the value attribute. Alright, so let's go ahead and try this one because it is worth a look. So here you can see that if I select one of these elements, the chosen one is going to display right here. You can also, of course, select multiple options. You do that by adding a multiple attribute, in the select field. And here is where we are typin' in the model. Notice that on this one, I have a modifier. So I added the .number, because even if I add a value of one, two and three here, when I select one of these, notice that right now it's actually sending numbers, but if I took off this .number parameter here, when I click on these, we have to let it reload again. Notice that now it's actually sending strings, they are quoted. So that's when the modifiers come in really handy, so by adding .number, we're makin' sure that we are passing along number fields instead of string fields. And I'm hitting the Command key, 'cause I'm on a Mac, it would be the Control key to select multiple elements. Also notice that it's automatically ordering these, so even if I choose three, and then I go to one, it puts the one first and the second one second and the third third, so. That's also something interesting to note. You can also use V4 to go through a series of options. So notice that I've created this array here, with a list of text and value pairs. And this element right here is actually built dynamically by combining V4 and passing along the myDynamic here, so this myDynamic is actually the value, that gets chosen when I choose any one of these. But the V4 has a series of options that get picked up from this myOptions array. So you can fill an entire select menu from data instead of having to type in everything yourself. You can also take a look at the documentation for all input fields right here. So let's take a look at a problem with a solution. To begin with, let me show you what I've got to get you going. So we have a similar application as we had before, but I've added an input field, and also this section, to toggle a check box that will show and hide the labels. All that is at the very top of my form. We have this check box right here. And then we have a range input type, just to show you a slightly different one. As well as an input field here for the maximum price. So let's take a look at what it should look like when it's done. When you're done, you should have the ability to type in a maximum price here, and see this list automatically update. You should also be able to use this range field to modify that maximum price, and they should both automatically update. And then you'll also have the option of toggling the labels on and off by clicking on this check box. If you wanted to see the difference between those two, you can take a look right here. And so the things that we want to do is make sure that we use v-model to control the max price. We will add a .number modifier to make sure that the numbers that we're getting are actual numbers and not strings. Then we're going to create a displayLabels Boolean to track whether or not the labels are showing. And we'll use a check box to toggle that value and modify the code so that it shows and hides the labels, so let's take a look at that problem. I'm going to start off with the labels, because they're the easier of the two to do. So I'm going to add a variable called displayLabels, set that To true. And then in my input field, I'm going to add a V-model that's going to track the value of that variable, so displayLabels here. And now, because displayLabels is set to true, it's going to be automatically checked. And if I click on that check box, it will eventually be able to control the look of the variables, but right now it's just modifying the value of this displayLabels. So we need to modify the labels so that they show only if the value of this is true, so we will add in the label here. An additional check for displayLabels. And we'll do that to each one of these, this one I'll put in parentheses. And then we'll also check for the value of displayLabels. And now we also need to do that for this last one. So this needs to say V if displayLabels. And now, if I toggle this on, you can see them on and off. And here, I'm not going to be able to use V if, I need to just use V else here. And I'll modify this a little bit, so I'll actually use V else if. And I'll say displayLabels or item price. Is less than or equal to 10. And displayLabels. And now, all the labels are going to show or hide, depending on the click of this right here. And then for the other ones all I need to do is really just make sure that I track the value of the max variable that I have right here. So on both of these input fields, I'm going to add the model. And I'll say track the value of max, but I will use the .number modifier here, to make sure that I'm always comparing against a number. And I'll do the same for this one. And you can see that now it's controlling the display of the elements, depending on what happens here. And if I type in a different number here, it's also going to control things.