Optimizing your App and Using Components to Display Data Chapter 3</td>
</tr>
</script>We now need to update the view to use the team-member component instead of the fixed
code. To make our view cleaner and easier to understand, we are going to utilize the
HTML attribute mentioned earlier. Create a tag and add the v-
for loop we had before. To avoid confusion, update the loop to use individual as the
variable for each person. They can be the same, but it makes the code easier to read if the
variables, components, and props have different names. Update the v-for to be v-
for="individual in people":
<table>
<template v-for="individual in people">
</template>
</table>Inside the template tags of your view, add a new instance of the team-member
component, passing the individual variable to the person prop. Don't forget to add v-
bind: to the person prop, otherwise, the component will interpret it as a fixed string with
the value of the individual:
<table>
<template v-for="individual in people">
<team-member v-bind:person="individual"></team-
member>
</template>
</table>We now need to update the component to use the template we have declared using the
template property and the ID of the script block as the value:
Vue.component('team-member', {
template: '#team-member-template',
props: {
person: Object
}
});