- Let's take a look at how we can add some more
complex data into this application.
Specifically, I want to add a list of appointments here,
so I'm going to go down here to this data section
and I'm going to type in a variable here
called appointments.
And I want to import some data, or get some data, from
a gist that I've prepared for you at this URL,
and what you need to do here is click on this raw button
and select all the stuff, and we'll just paste that
as some sample data into our appointments.
So I'm going to go ahead and save that.
I have an extension in Visual C, a code called prettier,
that makes it look really nice,
it pre-formats it a little bit.
And so, let's say that I wanted to add this data in here,
so I'm going to go ahead and, after this icon, I'm going
to add a new section, it's going to be just a div, and
what I want to do is go through that data.
So once that data is available to this component,
I can create sort of a template where I can input that data.
So I could do something like this, since I have that data
under appointments, I could say give me
the first appointment and pet name, and just do an h4.
That's going to show you only, obviously,
the first piece of data.
But if I want to go through a list of appointments,
or a list of information, I'm going to need something else.
And that is one of the really popular directives in UJS
called v-for.
It's a way to create a loop,
just like you would with JavaScript.
And what I want to do here is loop through each item,
and also I want to get an index, because when you loop
through elements in UJS, you're going to need to have
some sort of way of identifying an index for
each of your items.
So we'll do this, and look for items and also the index
in our list of appointments.
Now I'm also going to need to v-bind a key, and I'm going
to use that i variable for the key.
So, here's a couple of interesting directives.
v-for, clearly a loop that lets you go through
a series of elements, and then you can use interpolation
here, so we can say now item pet name, and that does need
to go in the double curly braces.
And then I'll use the interpolation here to say
item dot appointment notes, which is just another one
of these fields right here.
And now, it's going to go through that list and output
these two things, and another thing that I'm doing here
is using this other direction called v-bind,
that allows you to create a variable for
each one of these elements, and we're assigning
that variable to that i.
If I don't do this, I'm going to get an error.
Again, every element has to have a unique identifier,
and that's why we're using this v-bind directive here.
So let's take a look at our application,
and now you can see that we have a list of all
the appointments.
We have used more complex data, and learned about
a couple off directives, v-for and v-bind.