Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Optimizing your App and Using Components to Display Data Chapter 3

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') }}