Forms are an integral part of any application and are really one of the places where a view can shine the most. In this lesson, we'll learn how to set up an input field so that we can add items to this shopping list. The first step will be to put the markup for the input in our template. If we check things out in the browser now, sure enough, we get our input.
We can also type out a new item, no problem. However, how do we now access the value of this input from within our view application in order to add it to our array of items? Well, that's where vModel comes in. Vue's vModel directive makes it easy to bind reactive data to a form input so that whether the data is modified by the user via the input, as we just typed, or by the code itself, the data always stays in sync.
Let me show you how it works. First, we'll need to create a data property called new item. And we'll initialize it to an empty string. Next, we need to add the model to our input.
And give it the value of the data property that we want it to sync with, in our case, new item. And just like that, we've established a two way data binding between our input and the new item data so that they'll always stay in sync. Let's also print out the value of the new item just under the input. That way you can see the data binding in action.
Over in the browser, if we type in the input, you'll see that the text below updates in real time. Isn't that awesome? This shows us that typing in the input updates the value of new item. The reverse of this is also true.
If we were to update the new item data property, the text of the input would also change. Let's learn a little bit more now about vModel. vModel can also take a modifier. Modifiers can alter the behavior of vModel and are defined by adding a period and then the modifier name after vModel.
Let's take a look at an example. lazy modifier. Notice how the text below the input didn't show up until after I blurred the input. Other handy V model modifiers include dot number, which casts your data to a number as opposed to the string version of a number, or the dot trim modifier, which automatically removes any surrounding white space from your data.
We don't really need them for our case, so we'll just remove them. Also, using vModel is not just limited to text inputs. We could also use vModel on text areas, selects, checkboxes, radios, and more. Let's see how vModel works on radio buttons, for instance.
Besides setting the label for the new item, let's also allow the user to select if the item is a high priority item or a low priority item. To do this, we'll add another data property called new item priority, which we'll set initially to low. And then I'll create a couple of radio buttons to bind it to. We'll use vmodel to bind it.
I'll give it a value of low and a label as well. Then we'll do the same for high. Now, if we print out new item priority alongside the new item, we can see it change when we toggle between the different priorities. And I'll also just throw a break tag in there, just so we can see it a little better in the browser.
Cool. Now over in the browser, we can see that our default of low is selected. And low is printed here. And then if we change it to high, then high is printed here.
You'll also notice that high is lowercase. That's because the value of our data property is equal to whatever the value is on the input itself. All right, cool. That's how radio buttons work.
What about selects? Well, selects work much the same as the radio buttons do, except with the value being set on the options element instead of an input element. Let's change out the radio buttons to use a select instead in order to get the same behavior we just had, but with just a little different look. Now, when we check it out in the browser, you'll see that it looks a little different, but it works essentially the same.
Since new item priority only handles two values, it could be simplified to a boolean. Let's rename the data property to new item high priority. So that way, we can set it to true for high priority items and defaults for low priority items. We'll default it to false.
Probably the best native UI element for a boolean value would be a single checkbox. A checkbox appears checked for true values and unchecked for false values. Okay, so let's change out our select for a checkbox. And we'll bind the checkbox using the model to new item high priority.
And then lastly, since checked means it's a high priority, we'll label it high priority. Let's also update our printout to reflect the new data property name. Cool. Now, over in the browser, we have our checkbox unchecked because currently it's false.
But when we check it, its value becomes true. As you can see, finding a checkbox with the model to a Boolean easily toggles the value between true and false. This is great for things like toggling dark mode, light mode, toggling some user setting, adding high priority to a shopping list item, or adding privacy agreements in forms. Sometimes though, checkboxes are needed for more than just toggling booleans.
Sometimes they're needed for collecting multiple answers to a single question on a form. To demonstrate that, let's add a data property called ice cream flavors and set it to an empty array. Now in our template, let's provide the three staple ice cream flavors as checkboxes. And maybe we'll add cookies and cream too, just because it's my favorite.
And I'll just pretty up the labels a little bit. All right. Now we can use vModel to bind all these checkboxes to the same ice cream flavors data property. Now, looking in View DevTools, When we check and uncheck different flavors, you'll see the checked ones get added to the array.
And the unchecked ones get removed. That's pretty sweet. All right. Now that I've got you sufficiently hungry for ice cream, let's remove that checkbox example code.
Remove the printouts. Remove that ice cream flavors data property. and figure out how we can add some of that delicious ice cream to our shopping list. items.
As you can see, we now have our items output in the console. It looks a little strange because Vue has turned the items into a proxy. But if you fold down proxy and then target, you can see the array as you'd expect. Let's use that V model power on our input to set new item equal to cookies and cream ice cream.
I want you to take a moment to notice that the value of our input updated as well. That's that two-way data binding in action. push. And just like that, we've added a new item to the shopping list.
As you can see, Vue is a wizard with forms, and there's almost nothing that you can't do with the model. In the next lesson, we'll learn how to use events to allow users to add new items themselves through the interface.