- [Instructor] In this video, we'll wire up
our New Message component
so that when we hit the submit button,
we can display whatever we typed in our Message field.
So back in our front end project on line 15,
we can see our submit button.
We currently have click set to nothing
so let's set it to a function called submit
and now we'll actually need to create that function.
So within our script,
below our data function,
let's add our methods.
So I'll create a new object here
and then let's define our new method within that.
So let's call submit
and inside, I'll simply use a console.log,
and type in a test string.
Let's save that and give it a try.
So with our Console open,
I'll hit submit.
And we can see our test message is displaying.
So now let's look at how to get the value
from our Message field.
To do that, we'll have to bind to it.
So let's go up to our Message field on line 11
and we'll use the v-model property to do that.
And we need to set this to a variable
that we'll bind to.
So in this case, I'll set it to messageBody
and since that does not exist,
we'll need to create it.
So let's go down in our data
and we still have the messages array
from the original Messages component
which we no longer need.
So I'll replace line 27 with messageBody
and I'll initialize it with an empty string.
And now, let's display that messageBody
when we hit submit
so instead of our test string,
we'll delete that on line 35,
and replace it with this.messageBody.
Let's save that and give it a try.
So I'll type in test into the Message and hit submit
and we can see that the value is being displayed.
So let's look at what's happening in the component.
We created a new property called messageBody
with a value of an empty string
inside our data in the component.
Then, we told the text-field on line 11
using the v-model property to bind to that variable
so that anything we type in that field
will be set to in the messageBody property,
but that also works the reverse way.
I'll set another value.
Let's take a look at that.
And we can see when the page refreshes,
that value is displayed
so it not only inserts the value I type in here
into the v-model,
but it also displays the value from it
in our field.
So now that we're able to get the new message
the user typed in,
let's look at how to send that
to the back end.