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.
Listen for an event with v-on - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Listen for an event with v-on
- [Instructor] In this video we're going to do something a little more complex with our data, which means adding methods and event listeners. Specifically we're going to update the colors data for our view instance when the selected size changes. We need to do a little setup for this first. I need to start with some colors data to update. So I'm going to add a key called colors to my data object, and I'm going to pull that data from the same inventory object. I'm pretty sure this is called all colors. I'm going to type Cmd + P, which'll open up my open a file list here, here's chapter two inventory, and yes, it is called all colors, and there they are. Okay, so this will start me off. Just like with computed properties, which are functions that return some data, now what I need to do here is add a function that can be called from my template on an event listener. The way to do that is to add a methods key to my view instance. These will be functions that I can call elsewhere from…
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
-
-
-
-