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.

Challenge: Activate the color selector

Challenge: Activate the color selector - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Challenge: Activate the color selector

- [Instructor] For this first challenge, we're going to activate the color selector. Here's what that means. First, we're going to swap out the hard-coded color options for the ones that come from our view instance. We're going to track the selected color, and use it to update the source attribute on the image. There are images available for all five colors, I'd recommend using a computed property that swaps out red from the value of the currently selected color. Then we'll check the inventory and update the size selector, based on the selected color. For a little extra credit, you could update both selectors based on the availability of the other. So what I mean by that is, say I have red selected as my color, and I change the size to 12. If red is not available in size 12, I should update the selected color to one that is available in that selected size. And I could do this both ways. If you're going to do this, I recommend using indexOf on the array of available sizes or colors to…

Contents