(electronic tones reverberating)
- [Instructor] In this video we're going to walk through
my solution to the color selector challenge.
So first I'm going to keep red as my color
and select size 12.
This is the example we were talking about before
where red isn't available in size 12,
so the color changes to brown
which is the first available one,
and the image updates, as well.
Alright let's see how all this works in the code.
Over here in my index.html,
first I have a computed property size source,
which is bound to the source attribute here,
and then in my colors I've used v-for
to iterate over a colors aray and show the available color.
I've hooked that up to selected color,
and I have a new method called update sizes by color,
which fires on change.
And over here is my app.js.
I already had colors here,
but I've added selected color and defaulted it to red.
Down here in my computed properties
I'm just using the selected color
to pull the right color jpeg from the assets folder.
And then down here,
I have my update sizes by color method,
which is new.
I'm pulling out the selected color
from the event that comes through,
and then I'm grabbing the available sizes
using that same inventory.
And just setting it right away.
And then I'm doing my check for
if the currently selected size isn't available
in the new color,
setting the selected size to the first one that's available.
So again,
I'm using indexOf here,
and just checking my available sizes
to see if the currently selected one is there or not.
And if it's not,
which means this is returning negative one,
I'm updating selected size
to the first one that's available.
And I'm doing the same thing on the colors.
Checking the currently selected color
from the array of those that are available,
and then updating my selected color
to the first one that's available
if the current one isn't available.
So that about covers it.
And so,
we've just completed this challenge
and now we can move on to the next project.