Creating a repeatable component

The beauty of components is being able to use them multiple times in the same view. This gives you the ability to have one single "source of truth" for the layout of that data. We're going to make a repeatable component for our people list and a separate component for the filtering section. 

Open your people listing code you created in the last couple of chapters and create a new component titled team-member. Don't forget to define the component before your Vue app is initialized. Add a prop to the component to allow the person object to be passed in. For validation purposes, only specify that it can be an Object:

      Vue.component('team-member', {
        props: {
          person: Object
        }
      });

We now need to integrate our template into the component, which is everything inside (and including) the tr in our View.

The template variable in the component just accepts a normal string without new lines, so we need to do one of the following:

• inline our HTML template—great for small templates but in this case will sacrifice readability
• add new lines with the + string concatenation—great for one or two lines, but would bloat our JavaScript
• create a template block—Vue gives us the option to use external templates that are defined in the view using the text/x-template syntax and an ID

As our template is quite big, we are going to choose the third option of declaring our template at the end of our view.

In your HTML, outside of your app, create a new script block and add a type and ID attribute:

      <script type="text/x-template" id="team-member-            
       template">
      </script>

We can then move our person template into this block and remove the v-for attribute—we'll still use that in the app itself:

      <script type="text/x-template" id="team-member-
      template">
        <tr v-show="filterRow(person)">
          <td>
            {{ person.name }}
          </td>
          <td>
            <a v-bind:href="'mailto:' + person.email">{{                
             person.email }}</a>
          </td>
          <td v-bind:class="balanceClass(person)">
            {{ format(person, 'balance') }}
          </td>
          <td>
            {{ format(person, 'registered') }}
          </td>
          <td v-bind:class="activeClass(person)">
            {{ format(person, 'isActive') }}
          </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 <template> HTML attribute mentioned earlier. Create a <template> tag and add the v-for loop we had before. To avoid confusion, update the loop to use inpidual 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="inpidual in people":

      <table>
       <template v-for="inpidual in people">
       </template>
      </table>

Inside the template tags of your view, add a new instance of the team-member component, passing the inpidual 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 inpidual:

      <table>
        <template v-for="inpidual in people">
          <team-member v-bind:person="inpidual"></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
        }
      });

Viewing the app in the browser will create several errors in the JavaScript console. This is because we are referencing several methods that are no longer available - as they are on the parent Vue instance, not on the component. If you want to verify that your component is working, change the code to only output the name of the person, and press refresh:

      <script type="text/x-template" id="team-member-             
        template">
        <tr v-show="filterRow()">
          <td>
            {{ person.name }}
          </td>
        </tr>
      </script>