- [Instructor] Let's take a look at some ways
that we can work with checkboxes in Vue.
So, here you can see that I've added some options
to the Deck Settings page,
so far,
I've only added some basic HTML,
nothing related to Vue
or any kind of dynamic behavior.
Let's take a look at this first checkbox,
include reverse cards
just means that, the user would be presented
with both sides of the card as they go through the deck.
So, they may be shown a description
and they'll have to come up with the name of the item
and vice versa.
One way we might deal with managing the state
of this particular checkbox within our Vue app
is to set up a data property that's associated with it,
which we could call, reverse.
This will be a Boolean value
because it's just going to keep track
of whether this checkbox is checked or unchecked.
So, we would initialize to false.
And then we would connect that to the checkbox using
v-model,
so, v-model = reverse
and note that the value attribute here
really isn't serving any purpose,
but we'll leave it for now
because we'll use it in another way in a moment.
To help us see this in action,
let's add another div down here
where we just display the value of reverse.
So, you can say the value of reverse
is, and I'll make it bold
and we can just display it as a string.
So, now when I refresh,
you can see the default value is false.
And as I toggled the state of this checkbox,
you can see a change there.
Let's say you're dealing with a legacy system
that's expecting a parameter named reverse,
that set to either on or off when we post this form.
To handle that, we could use the true-value
and false-value directives.
So, I could say, when this is checked,
I want its value
to be on
and when it's unchecked,
I want the value to be off.
So, now when I toggle the checkbox, you see, on and off,
instead of true and false,
note that I didn't change the default value of false,
so we still saw that one first.
In this case, you'd probably
want to just change that to off.
Another way we can handle these checkboxes is as a group,
in Vue, it's typical to use the same v-model property
on a group of related checkboxes.
So, instead of being named individually,
we could use the name options
and then copy that to the other two checkboxes.
And then down in data, instead of reverse,
we could have options initialized to an empty array.
So, what that will do
is store all of the values of the checked boxes
in an array for us.
And again, to see this in action,
let's just display the array as a string up here.
So, instead of value of reversed, I'll show selected options
and that will just cast it to a string
and show us what we've selected.
So now, as I'm checking and unchecking these boxes,
you can see the values are added to our options array
and they're kept in sync with the state of the checkboxes.
Next, we'll take a look at radio buttons and select elements
which usually behave in a similar fashion.