From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Solution: Activate the color selector

Solution: Activate the color selector - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Solution: Activate the color selector

(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…

Contents