- [Instructor] So let's work on adding a star
into our records.
That's going to teach us how not just
to add something into the database
but how to update an existing element.
To do that, we're going to start up here and
we'll use a click method here
to target a function that we're going to call
toggle star
and I'm going to pass along
the item ID so that I'll know
which record to update
and then I'm going to come down here into methods
and in addition to being able to delete an attendee,
I'm going to create this toggle star method.
So this is going to receive
this attendee ID,
need to make sure I put a comma there at the end,
and we'll do the same check that we've done before,
looks like this,
and that's just so that the admin ID
matches the ID of what we passed in the route,
and here we want to create a reference,
so I'll create a constant called reference
because we want to use this reference
over and over, it gets a little bit messy
if you don't do this,
so we will check out the database
and then go through the path here,
so the collection, the first collection is users,
and then the document will be
the user ID
the second collection is going to be meetings.
The document is meeting ID.
And then the last collection is going to be attendees.
And we'll pass along the attendee ID
that we just got from
clicking on a specific record.
All right, so that's going to be our reference,
and now let's go ahead and use that
to get some information from the database
and then we'll do something from
the document that gets returned
from that database query
and so what I want to do here is
create a constant called star
and that's going to get the data from the document
for the star value.
Right, so here, what I want to do is
make sure that there is a value for star,
and if there is, then I'll execute
an update to that reference.
And update is what allows us to update
a specific record within the current database element.
So what I'll do is, I'll just target
this star element and whatever it used to be,
make it the opposite,
so if it's true, it's going to go to false,
if it's false, it's going to go to true.
And then, if there isn't a record for star,
then we'll also execute the update command
and set that star to true.
Right, so what this'll do is,
give the star the proper value,
even if it doesn't exist.
All right, so that means though,
that we get this information about the document
and we're asking for the ID and the email
and the display name, we also need to make sure
that in here, I add the information about the star,
so we'll do doc, data, and look for the value of
star from the document so that it can be displayed properly.
Which also means that I'm going to need
to come up here and
conditionally
show or hide some classes
depending on the value
of whether or not this user has
been assigned a star.
So to do that, we're going to use
this v-bind directive for class,
so we'll put in a colon here,
and I took out the button-outline-secondary
'cause that needs to be part of my expression,
so when you do a v-bind directive there
with the class, you can pass along
an expression in a number of different ways
and I'm going to use this array notation
because it's the one that's going to work the best here.
Now if you want to take a look at
all of the different ways that you can add classes,
make sure you look in the library
for Vue.js essential training.
And so what I need to here is
what we call a ternary statement
and it just means, an if-then statement
that kind of goes in a single line,
so I'll do item star and question mark,
so this is saying, if the value of item dot star is true,
then I want you to output a class called text-danger,
otherwise, and the colon means otherwise,
go ahead and apply an empty class,
and then by default, go ahead and add
this btn-outline-secondary class back.
So once we do that, let's go ahead and save this
and take a look at our application
and see if we can click on these items.
So you can see that when I click on these,
it's going to turn them on and off
and also if the item doesn't have a star,
then it's actually going to push that star
into the value for that user as well,
so now you know how to do different kinds
of reading and writing and pushing and updating
into a database and you have pretty much
everything you need to know about dealing with data.