- [Instructor] Now we'll find out
how to bind data to radio buttons,
and then we'll do the same for select elements,
also known as drop-downs.
So here we have a couple of related radio buttons
in a field set for an additional option called leech action,
with one of two values, tag or suspend.
Leech is a term that I'm borrowing
from a popular flashcard program called Anki,
which gets his name from the Japanese word for memorization.
Anki defines leeches as cards
that you tend to have trouble with repeatedly.
So you'll have the choice to either temporarily suspend them
or just tag them as leeches for reference.
Much like a group of related check boxes,
I'll use the same V-model property
on each radio button element. And we'll call it leech.
So I'll add V-model equals leech,
and then copy that to the next radio button.
(computer keys clicking)
And then in our data object down here,
we'll add leech and we can let it default to tag
because that's the first one that appears.
Instead of displaying the selected value on the page
or looking at it in the JavaScript console,
let's track this value using the Vue JS devtools extension,
which is available for Chrome and Firefox,
or as a standalone app.
I happen to be using Firefox at the moment.
So I'm just going to search for Firefox Vue devtools.
At the time I'm recording this course,
the first value here will still install the Vue two version,
although it might be different for you
by the time you watch the course.
But for me, the Vue three version is still in beta,
so I'm going to look at this third result here
and visit the GitHub repository,
scroll down to installation,
and click on beta channel next to the Firefox add-on.
I'll click on the first release in the list
and then click on this XPI file down here.
Continue to installation,
and allow it to be added to Firefox.
And now you should see this little V in the upper right.
If we go back to our page and click on that V,
we should see a message telling us
that Vue JS was detected on this page
and suggesting that we opened the devtools
and look for the Vue panel under the Vue tab.
So I usually do that with F12,
and if you don't see it right away, try refreshing the page,
closing and opening the dev tools again. And there it is.
So over on the right, I have the Vue tab,
and if I click that, then I can click route
which corresponds to my route Vue instance.
Then I should be able to see all of my data
over here on the right, including the value for leech,
which I can confirm changes from tag to suspend
as I toggle those radio buttons.
Next, let's take a look at this select element here
which offers some possible categories
to assign to our flashcard deck.
Again, if I want to manage the selected value with Vue,
perhaps to post the options as JSON,
to an API with an Ajax request,
I can simply add V-model (computer keys clicking)
and I'll call it category ID. (computer keys clicking)
And then let's make sure that we add category ID
to our data down here. (computer keys clicking)
And we can initialize it with the same value
as the default that just invites the user to select,
which is an empty string.
And to ensure that we've set this up correctly,
(computer mouse clicks)
I can refresh and take a look at the Vue dev tools.
You can see this default category ID empty string
and watch it change
as we select different options from the dropdown.
So seeing that ID changed there
makes me confident that I can access the selected value
in the dropdown, when necessary, from my Vue logic.