- [Instructor] In this video, instead of hard coding
our first and second message in our messages list,
we'll display a set of placeholder messages
that are located inside an array.
And so the first thing we'll need
to do is create that array.
So back in our messages component
below our template, we'll create a new line
and add a script element, and close it.
Then we'll set up the default view object
with export default, and inside
we'll create a data function,
and this will return our messages array.
So we'll use the return and supply our messages as an array.
And in here I'll just type in some placeholder messages.
And I'll use the auto formatter tool
in Visual Studio code to clean that up a bit.
So just for a quick test, let's save this,
and then open up our browser,
open up the console, and in Google Chrome,
you just simply press F12 and go over to the console tab,
and make sure that there's no errors.
Now let's take a look at how we can display these messages
in our list instead of the hard coded messages.
To do that, we'll use a v for.
So on line four, I'll add to the element v dash for.
And I'll specify message in messages.
And if we hover over the error,
we can see that eslint is throwing us a warning
and suggesting that we need to use a key directive.
We won't worry about that for now,
and we'll take a look at that later.
Next, let's get rid of line six.
And on line five, we'll get rid of first.
Then we'll need to supply the actual message
as the v for iterates through the messages list.
To do that, we'll use curly braces,
and inside we'll type in message.
Let's save that and give it a try.
And now we can see that our array is being displayed.
So if you're familiar with the JavaScript for loop,
this is very similar.
Let's add one more message to our messages array on line 13.
Let's save that and take a look.
We can see that it still continues
to display all of our messages.
Later in this course, we'll see how
we can supply data from the back end.
But for now, we'll continue to use the messages
that we hard code on the front end in our messages array.
Now, although this is working,
it doesn't look very modern, and it's not
what we would expect from a modern web application
or a mobile application.
Next, we'll take a look at how to modernize
our user interface using a UI library called Vuetify.