Optimizing your App and Using Components to Display Data Chapter 3Viewing 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>Creating component methods and computed functions
We now need to create the methods we had created on the Vue instance on the child
component, so they are available to use. One thing we could do is cut and paste the
methods from the parent into the child in the hope they would work; however, those
methods rely on parent properties (such as filtering data) and we also have the
opportunity to utilize computed properties, which cache the data and can speed up your
app.
For now, remove the v-show attribute from the tr element—as this involves the filtering,
and that will be covered once we have our rows displaying correctly. We'll step through the
errors and resolve them one at a time to help you understand problem-solving with Vue.
CSS class functions
The first error we encounter when viewing the application in the browser is:
Property or method "balanceClass" is not defined
The first error is with regards to both the balanceClass and activeClass functions we
use. Both of these functions add CSS classes based on the data of the person, which does
not change once the component has been rendered.
Because of this, we are able to use the caching found in Vue. Move the methods across to
the component but put them in a new computed object, instead of the methods one.