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.
Pass component data with props - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Pass component data with props
- [Instructor] In this video, we're going to flush out the directory people component with a more complete template and introduce how to use props and Vue to pass through data. We previously talked about how both the form and the list of people need access to the people list. So right now I have that people list as part of the root components data. We need to pass that from the root into the people component for rendering, and for that we need props. So over here in my editor, I'm going to first update the HTML to pass that data through. So the data that we need is the people list which is just called people. So over here in index.html, here inside the root I'm going to pass through people. And to do that I'm going to use v-bind:people. Of course, we can use the shorthand now, so we don't need v-bind. We'll just use the :people, and the value should be the key from the Vue data. So we're using the same name here. If I save this, the data should be flowing through now. And on the other…
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
-
-
-
-
-
Make a plan2m 26s
-
Scaffold initial components5m 18s
-
Pass component data with props6m 4s
-
Build the filters form5m 13s
-
Wire up the filters form4m
-
Respond to filter form updates3m 7s
-
Handle custom filter event3m 29s
-
Animating with transition-group6m 28s
-
Challenge: Better usability and animation1m 30s
-
Solution: Better usability and animation1m 39s
-
-
-