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 - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Installing Vue on an existing site2m 33s
-
Creating an instance from the mock-up3m 30s
-
Identifying components and data2m 54s
-
Adding data to our component3m 52s
-
Using a model to begin interactivity3m 24s
-
Using v-bind to update classes3m 34s
-
Simple templates with computed properties2m 51s
-
Listen for an event with v-on4m 3s
-
Shorthand notation for faster writing1m 44s
-
Challenge: Activate the color selector1m 9s
-
Solution: Activate the color selector2m 4s
-
-
-
-