From the course: Building Vue and Node Apps with Authentication

Showing your data

From the course: Building Vue and Node Apps with Authentication

Start my 1-month free trial

Showing your data

“

- [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.

Contents