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

Pass component data with props - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

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…

Contents