- [Narrator] In this video we're going to walk through
the starter code for this project.
Instead of building the vue parts completely from scratch
I've given us a bit of a running start
so we can jump ahead to some different aspects.
Let's take a tour of what's here
so we can become familiar with it.
And look at a couple little things that are different
from what we've seen previously.
We'll start with the index.html file.
Going to jump down to line fifty
with control g.
And here's my view route.
I have my two components here
post-status form and post-status messages.
Messages has a messages prop
which will be the data that we're getting back from the API.
I'm going to jump down to the bottom of the file
with command, down arrow.
And we couple other libraries
that are installed here as well.
I've included date and time
which is a very small library to help you format
dates and times which is a little inconvenient to do
with vanilla java script.
And I have some polyfills for ES6 support with axios.
Which is the library that we're going to use
to actually make network requests.
And then of course we have vue and the hotel.js file.
So let's look at hotel.js next.
First we have a config object which has the apiUrl
which you may need to update depending on your setup.
And then we have some message types here
which is an object.
All these keys are the values
that will be stored in the database.
And then these are the displayed labels.
My post-status form component has some data.
I've just copied that config data for the message types
into a message types piece of data here.
I'm pretty sure this will never change
but I've copied it in here just in case.
Then we have a message which starts out blank
and a type which will be the first of these message types.
I've used Object.keys to extract all these keys
into an array and just pooled of the first one
with sub zero.
Then I have my template down here.
A couple things I want to mention about this
the first is that even though this is a text area
and normally you would expect the value to be here
between these text area open and close tags
vue keeps things consistent.
And uses v-model just like it would
on any other input type.
Then there is the v-for down here
which looks a little different from what we've seen before.
This can iterate over objects just as easily
as it does over arrays.
I've just pulled out the label and the value
in other words the key and the value
for message types.
So I combine the value
for this option tag and then use
a separately displayed label.
Down here in my post-status messages component
I'm going to need the message types again.
So I've copied those into the data object here.
Here's our messages prop
and then here's the template.
I'm iterating over these messages with v-for again.
And I'm using the displayed version
of the message type here.
And I'm using a method to calculate
what should be displayed for the time.
My method is called timeformatted
and I'm pulling out the time
as it comes back from the API
and parsing it, using that date and time library.
Which exposes a global called "date".
Here's the format that I want to use
I'm just returning the formatted version of the date.
And finally right now the messages are
part of the route vue component.
And they're just static data for now.
So now if I switch over the the browser
jump down to my statuses area
here are the various message types.
And here are my static data displayed as messages.
So now we've established our starting point
and we can start writing some code.