Forms are an integral part of any application. And to be honest, they're really one of the places where Vue 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. First, we'll need to put the markup for the input in our template.
It'll be the type of text. And we'll give it a placeholder. Add an item. Now, over on the right-hand side, sure enough, we've got our input.
We can also type out a new item, no problem. However, how do we now access the value of the input from within our view application, specifically within the script section of the view application? That way, we can 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 or by the code, the data always stays in sync. Let me show you how it works. First, we'll need to create a new reactive ref called new item. And I'll just initialize it to an empty string.
Next, we need to add a V model to our input and give it the value of new item. Just like that, we've established a two-way data binding between our input and the new item data. That way, they'll always stay in sync. let's print out the value of the new item just under the input.
That way you can see the data binding in action. Now, over on the right-hand side, if we type in the input, you'll see the text next to it 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 change as well. Awesome. Now, the model can also take modifiers.
Modifiers can alter the behavior of the model and are defined by adding a period followed by the modifier name. Let's take a look at an example. If you'd like your app to be a little less real-time and only update the new item after we've blurred the input, then you can add the lazy vModel modifier. Pretty cool.
number, which casts your data to a number as opposed to the string version of a number. or the dot trim modifier, which will automatically remove any surrounding white space from your data. That could be handy for our shopping list app. All right, using the model is not limited to just text inputs.
We can also use it on text areas, selects, check boxes, radio buttons, and more. Let's see how the model works on radio buttons. 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 reactive ref, which we'll call new item priority. And we'll initially set it to low. Then we'll create a couple of radio buttons to bind it to. As you can see, we now have the two radio buttons.
And they are both bound to new item priority with the model. Finally, one has the value of low and the other the value of high. Now, if we print out new item priority underneath the radio buttons, we'll be able to see it change when we toggle between the different priorities. And I'll also just throw a break tag in there so we can see it a little better in the browser.
So now, low, our default, is selected and printed here. But when high is selected, high is printed here. Awesome. You'll notice that high is lowercase.
That's because the value of the new item priority reactive ref is going to become whatever the value of the input is, not the label itself. Selects work much the same as radio buttons do, 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. That way, we get the same behavior, just with a little different look.
All right, you see here our select. And we've bound new item priority to it with the model. Also, it has two options, low and high, each with values like we saw the radio inputs have before. If we check it out in our app, you'll see that it looks a little different now, but it works just the same.
Since new item priority only handles two values, it can be simplified to a boolean. Let's rename the reactive ref to new item high priority. That way we can set it to true for high priority items and false for low priority items. 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. Let's change out our select for a checkbox. You can see now that the select has been replaced by an input with the type of checkbox and it's bound to new item high priority. Since checked means it is high priority, we've labeled it high priority.
All right, let's update our printout to reflect the new reactive ref's name. Over in the application, our checkbox is unchecked because it's currently false. And when we check it, its value becomes true. As you can see, binding a checkbox with vModel 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 checkboxes are needed for more than just toggling Booleans. Sometimes they're needed for collecting multiple answers to a single question on a form. Let's add a reactive ref 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 check boxes. I have here the three check boxes. and each one is bound to the same reactive ref. We can replace the printout of new item high priority with ice cream flavors so that you can see what happens when we select or deselect certain ice cream flavors.
Right now, we see an empty array because nothing is checked. But as soon as I start checking ice creams, you see that they get added into the array. And unselecting an ice cream removes it from the array again. Awesome.
Now that I've got you sufficiently hungry for ice cream, let's remove the checkbox example code, remove the printout, and figure out how we can add some of that delicious ice cream to our shopping list. In the next lesson, we'll learn how to use events to allow users to add those new items to the shopping list.