- [Instructor] It's time to make this add appointment
collect the data from the form.
And so, what we'll do to do that is come down here
into our data section and we'll add a new variable here
called form data.
Now, this is going to start out as an empty array
and I'm going to take the information from the form
and place it in this empty array.
So, to do that, we're going to use a directive called v-model
and that can go on input fields or text areas
and it's going to track what is going on
with the current input field and store it in a variable.
Now, we could store it in a variable by itself
but since we created that form data variable,
we can actually put it in there as well.
So, this will go in form data
and it'll have the name of pet name.
And now, whenever I edit the input field,
it's going to populate that into that array,
so, I'll need to do that for all of the input fields
and also the text area.
If you've noticed, I like to actually add a carriage return
whenever I'm doing framework specific code
and then putting the code that is specific to the framework
in a carriage return.
And so, this one will also be form data,
this one will have the name owner name.
Here's another input field.
So, once we have all that data being stored into our array
then, we'll need to worry about what happens
when somebody submits this form.
So, here's the form element and what we can do is
issue a event of submit so when somebody submits this form,
then, I can run a method called request add
and this is one that I'll be creating.
Now, another interesting thing about Vue.js is that,
it offers all these properties that do common things
that you need to take care of.
So, one of the ones that I want to use here is
the prevent property.
What this will do is modify the submit
so that it prevents the default behavior
of what submit would normally do.
Submit would normally refresh the page,
it would actually send the data from the form
to some sort of form processor
that you usually write in some language
and then it would cost a page reload.
But we don't want that to happen
so, we're going to include this prevent modifier
and there's actually quite a few other modifiers
that you can use
so you can check the documentation for that.
But we're using prevent
and then we're executing this function called request add.
So, let's go ahead and build that method.
I'll need to create a methods section
in my configuration section here.
And then I'll issue this request add
or I'll create this request add method.
And this is going to be a function and I'm going to create
or rather, modify the form data array by passing it along
the information from my different fields.
So, I'm going to save that name,
it's going to be set up to this form data, pet name.
The v-model will take care of filling that in for me
and then, I just need to do the other ones.
Now, for the date, I'm going to combine
the date and the time
because I like to ask those questions separately
when you're filling out a form.
I like to be able to let people put in the date in one field
and then the time in another field.
So technically, there are two different fields
and we'll need to combine them together
so, for appointment date, it's going to be this format,
appointment date and then plus
a space with the time.
It looks like we didn't need that last one.
And let's go ahead and save that,
it did a little bit of reformatting there
and see what happens when we submit the form.
Actually, you're not going to notice anything
when we submit the form but this is a good time to call up
the Vue.js developer tools,
make sure that we are in the right section
so we should be in add appointment.
Notice that there's the form data array
doesn't have anything right now
so, we'll type something in here.
Sniggles is a cat that I have.
And none of these are actually going to get populated
until we submit this.
I'll put in my name here, I'll put in today's date
and then a time
and we'll hit this appointment button here
and you should see this format data field populate.
Looks like the pet owner is not defined
so, that is probably some sort of typo that I did somewhere
so, let's make sure that that's working.
Yes, I put in here, owner name.
And so, I should have reflected that down here.
All right, let's try that again.
So, it was good that we checked anyways.
This particular cat I'm using here is always grouchy
so I know that I can put that in here 'cause it's true.
Very nice cat but just always, very grouchy.
All right so, let's take a look at this view tab now,
main app and we actually want to go to add appointment.
And now, it has all the right information
so, we're ready to push this into the array
once the submit button is hit
but we'll do that in the next video.