Appendix B. Solutions to chapter exercises

Solutions to the exercise questions in chapters 2–12 are listed here.

Chapter 2

• In section 2.4 we created a filter for the price. Can you think of any other filters that might be helpful?

Filters in Vue.js are commonly used to do text filtering. One filter you may want to add is a way to capitalize the product title.

Chapter 3

• Earlier in the chapter we looked at computed properties and methods. What are the differences?

Computed properties are useful when you’re trying to derive a value. The value will be automatically updated whenever any of its underlying values are updated. It’s also cached to avoid repetitively calculating a value that doesn’t need to be recalculated when it hasn’t changed, as in a loop. Note that methods are functions bound to the Vue instance. They only evaluate when they’re explicitly called. Unlike computed properties, methods accept parameters. Computed properties cannot. Methods are useful in the same situations where any JavaScript functions would be useful. An application isn’t effective without supporting robust user interactions.

Chapter 4

• How does two-way data binding work? When should you use it in your Vue.js application?

In the simplest terms two-way data binding works when updates in the model update the view, and updates in the view update the model. Two-way data binding should be used throughout your application when dealing with forms and inputs.

Chapter 5

• What’s a v-for range and how does it compare to a normal v-for?

A v-for directive is used to render a list of items based on an array. Usually it’s in the format of item in items, where item is the source array and item is an alias for the element being iterated on. The v-for can also be used as a range in the format of item in (number). In that case, it will repeat the template that many times.

Chapter 6

• How do you pass information from a parent to a child component? What do you use to pass information from a child component back to a parent component?

The typical way of passing information from a parent component to a child component is using props. Props must be explicitly set inside the child component. To pass information from a child component to a parent component you can use $emit(eventName). It’s worth mentioning that later we’ll look at other ways of passing information between components, including using a data store.

Chapter 7

• Name two ways you can navigate between different routes.

To navigate between different routes, you can use two different approaches. Inside the template you can add a router-link element. Or inside the Vue instance you can use this.$router.push.

Chapter 8

• What’s the difference between an animation and a transition?

Transitions move from one state to another, whereas animations have multiple states.

Chapter 9

• What is a mixin and when should you use it?

Mixins are a way to distribute reusable functionality for components. You should use mixins whenever you see that you’re writing the same code over and over again between components. Repeating code goes against the DRY (don’t repeat yourself) principal and should be refactored. Mixins will be “mixed” into the component’s own options.

Chapter 10

• What are several advantages of using Vuex over the normal data passing of a Vue.js application?

Vuex uses a central store to capture the state of the application. This helps our Vue.js app mutate state in a predictable synchronous way. This helps prevent unintended consequences occurring when state in our application changes. One advantage this has is that it helps organize data in our application in one place. Larger Vue.js applications can be cumbersome. Passing information or relying on an event bus isn’t ideal. Vuex helps abstract this problem away by providing one central store to hold all information.

Chapter 11

• What’s one advantage of using asyncData in your Nuxt apps versus using middleware?

The asyncData object is loaded on page components before they’re loaded. It has access to the context object and is loaded on the server side. One advantage it may have over using middleware is that its results will be merged with the data object on the page. This can be more advantageous than using middleware, where we might have to use a Vuex store to save data so it can be retrieved later inside the page component.

Chapter 12

• Why is it important to test? What tool is made for Vue.js that can help with testing?

Testing should be a fundamental part of any organization writing code. Automated testing is much quicker, and less error prone, than manually testing. It has a higher upfront cost, although it will save time in the long run. Vue.js offers many tools to help with testing. One of the most important is the vue-test-utils library. This will help do proper testing with our Vue.js applications.