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 - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
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…
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
-
-
-
-