- [Instructor] In this chapter,
I'm going to do some things that
are going to be changing the structure of our array.
So, to do that, I need to have a reliable index
that points to the way the original data is stored.
So if you look at the data right now you can see that
this data hasn't been setup with individual,
unique IDs for each of the pieces of data.
And I need that for certain instances.
So, for example, if I re-sort this list by name
then my list of indexes might change.
That means the ones that I'm using right here
will change because now Buffy will become the
zeroth element of the array.
Also, if I delete things, then the order of this index
that I'm generating here
might be different as I'm doing certain things.
So to take care of that,
I'm going to go into this App.vue file
and I'm going to create a new, sort of,
placeholder for my array info.
So I'm going to call this appointment index and
set it to zero as a default.
And what I want to do is also when I get the data,
I want to, sort of, add this index into
each of the pieces of data.
That way, my data will be changed so that
after it gets read from the file,
every element has a unique ID.
So what I'll do here is use JavaScript's map function
and then take each of the items in my data
and then add an appointment ID field
and I'll set that to my appointment index.
This will loop through all the pieces of data
and assign an appointment index.
And then, I need to go ahead and increment
the appointment index.
So the next time it goes through one of these,
it'll have a one, then a two, then a three
for however many elements I have in my array.
And then I'm going to return this item,
so that is going to go through all of the elements.
And then the appointment array is going to have
the data with an additional index for each of the items.
Now, instead of listing and worrying about creating
this individual index,
I should be able to use
this new index as the key.
So let's get rid of v-bind there.
And just say item appointment index, because now it exists
and now each one of these will have the appointment index.
Let's go ahead and save this.
And this is where having the Vue.js developer tools
will be useful.
So lets take a look by right clicking and selecting Inspect.
Then going to the View tab here.
And if we take a look at our main app,
you can see now,
that each of the items should have an ID.
If it doesn't, make sure you refresh.
And you should see the IDs after you refresh.
So, reason that the IDs weren't in there before
is that Vue.js doesn't update the DOM,
the things that you see,
necessarily unless it thinks it needs to.
Which is one of the cool features of Vue.js.
It's managing the DOM for you.
So these weren't automatically being updated
until we did a refresh.
That's also, Webpack is managing things for you as well,
so there's all kinds of good stuff going on.
And everything now is ready for me to do different things,
based on that index.