- [Instructor] In this video we're going to
wire up the post form
so we're actually sending data to the database via the API.
To do this we're going to need a new method that we'll fire
when the form is submitted.
We'll collect all the data that needs to be posted
and then post it.
We'll be using the post method for Axios to do this,
very similarly to what we did
to retrieve the messages originally.
So back here in hotel.js,
I'll scroll down to my post status form component here
and after the template
I'm going to add a methods key.
And this method, we'll call it postUpdate.
This will be a function.
I'm passing in an event grounder here.
I like to abbreviate this evt,
because we're going to fire this when the form submits.
So while we're here, I'll hook this up to the submit event
on this form using @submit.
I'll copy and paste the name of my method.
Okay, so what does this method actually need to do?
Well first we're going to prevent
the default action from taking place,
so the page doesn't try to reload or anything like that
when we submit.
Then we're going to collect the data that we need to submit
and we'll use Axios to post it.
So first we'll collect the data.
We'll create an object that we can send up
to the API through axios.
I'll call this newStatus.
This will be an object which will have a message key,
a type key, these are all the fields in the database,
and then the time.
So the message will be whatever's in our data object.
So I need message from type.
I'll do this.message and this.type.
For the time, we'll just take the current time
and format it properly.
So I'm going to need a new Date to get the current time
and this will be passed into
my data and time library's format function.
So I need the actual date which is now basically,
and then the format.
And this is the format that we're using in the database.
It's just the year, month, and day,
comma and ..the hour and the minutes.
This is all in the documentation for date and time,
but you can just follow along with me for now.
Okay, now we need to do a post with Axios.
So I'm going to use the CONFIG objects apiUrl
and instead of get.php this time,
we're going to go to post.php.
And the data that we're going to send along
is this newStatus.
And this returns a promise, so we'll chain on
then with a callback
and that will have a response.
Now post.php will return success, true, when this works.
So I'm going to be checking if response.data.success is true
and if it is we know that the message was received
by the API and we can update our UI appropriately.
I'm going to bind this here,
just to make sure that we have access to the view instance
inside this callback function if we need it later.
Okay, I can save that.
Prettier takes a little reformatting pass on it
and now we can check it and see if it works.
So switching back to the browser, I'm going to refresh.
I'm going to try Hello world, sent by the Pool team.
I post an update and nothing changes
so I know that the default event did not fire
but my user interface hasn't actually updated.
So to see if this actually worked,
we could open the Developer tools
and look at the Network tab to see if a request fired.
But we're too late to do that now.
Or we can just reload the page
and see if the message comes back.
There it is.
So at this point, we're able to post messages
to our API, but we can't see them until we refresh.
We're going to want the UI to update immediately
when a new message is posted, so we'll do that next.