- [Narrator] So it's time to make this add appointment
actually send something into our data.
So what we are going to do here is begin
by creating thee event.
So right now,
when I'm in add appointment,
I get to this part right here where I request thee addition.
And now I need to go ahead,
and emit an event.
I'm going to call this one add,
pass along the form data.
And then,
I'm going to reset the form data in this component
so that it's empty again.
So it'll just clear out the form,
and then,
one more thing,
I'll set the value of hide panel to true.
So what's going to happen is I fill out the form,
all of the fields in form data will be populated,
and then I'll hit this add appointment.
All this information will then
get admitted to the main component.
And then thee data here will clear
so that all these fields will be empty again.
And then we will set the hide panel value to true,
so that this hides again.
Otherwise the form would still sort of be showing.
And you would have to scroll down quite a bit.
Right.
So that's part of what I need to do here.
The next part I will do in the main component.
And what I need to do here is add thee event.
And this time I'm adding it to add appointment
because that is where the appointment is coming from.
And I call this event add,
and I going to call a local method called add item.
All right.
So go ahead and program that one.
That is another method.
So what we called an add item,
and just like the other one,
just going to get the appointment.
Make sure we add a comma here.
And what I'll do then is set up the ID of this
new item that I am adding,
because the form doesn't have an index field,
but I do keep track of this element
that I called appointment index here.
That keeps track of sort of thee number of appointments
that I've added into my data.
So I'll set thee appointment ID to this,
appointment index,
then I'll increment it so
the next one has the proper number.
And then I'll go ahead and push this data into appointments.
And that should automatically input the data into our field.
So it'll show up right here on this list.
Right.
Let's test that out.
And let's go ahead and hit the add appointment.
So you can see the new element right here,
And if I open it up,
all these fields are empty.
So I can fill it up with new data.
Just a couple of little changes
and you can see that thee process is
similar to what we've done.
And all we have to do is make sure we admit events
and collapse them,
and then create methods
that modify our data in the main component.