- [Instructor] In this video we're going
to do something a little more complex with our data,
which means adding methods and event listeners.
Specifically we're going to update the colors data
for our view instance when the selected size changes.
We need to do a little setup for this first.
I need to start with some colors data to update.
So I'm going to add a key called colors
to my data object, and I'm going to pull
that data from the same inventory object.
I'm pretty sure this is called all colors.
I'm going to type Cmd + P, which'll open up my
open a file list here, here's chapter two inventory,
and yes, it is called all colors, and there they are.
Okay, so this will start me off.
Just like with computed properties,
which are functions that return some data,
now what I need to do here is add a function
that can be called from my template on an event listener.
The way to do that is to add a methods key
to my view instance.
These will be functions that I can call elsewhere from view,
including on my event listeners,
and let's call this one update colors by size.
And so this will be a function
that's going to update my colors key.
For now let's just add a console message,
we'll say called update colors by size,
and we'll pass in the event that fired this,
and we'll check it's value with event target value,
like this, okay.
So we have a method available now,
and we can refer to it just like any of these data
or otherwise computed properties
over here in our templates.
So specifically, I want to call that method
when my size selector changes.
In other words, when the change event happens
on this select box.
Now instead of on change, or what have you,
I'm going to use a view custom directive,
which is view on: and then the name of the event,
in this case I'm going to use change,
and then I just pass in the name
of the method that I want to fire.
Update colors by size.
Alright, now that I've done this,
I'm going to switch over to the browser
and give it a try.
I'll refresh, so I'm going to open up my developer tools
with Cmd + Opt + I again, and I'm going to switch
to the console so I can watch for my console message.
So what's supposed to happen is I change the size
and I get a message, there it is.
And I have my value there.
Okay, all this is working so far,
now I need to hook it up so it actually updates
that data correctly.
So let's switch back to my editor,
and what I need to do is change this .colors
to window.inventory, and the object
that we're using here is by size.
I'm going to use Cmd + P to open that file back up again,
and just use the arrow keys to get down to it,
and so I'm referencing the by size object,
and then the key is the selected size,
and that will return whichever colors are available
in that size.
This is like a cheat that avoids having to use
an API or something else that's more complicated.
So by size, and then I can just pass in event target value.
Now I'm not doing any sanitizing
or checking that the value is in scope here,
we're just doing this quick to demonstrate how it works.
We'll switch back to the browser,
and we'll reload again.
And this time I'm going to switch to the view tab
and select my root component so we can watch this
and see if it changes.
Now there we go.
I'll open this up, I can see the data are changing
based on the size, wonderful.
Now of course, my actual menu is not changing yet,
hold that thought, we're going to deal with it later.
But at this point you've seen how you can
wire up an event listener with a method
in your view instance, so you can start
to do things when these events happen.