Solutions to the exercise questions in chapters 2–12 are listed here.
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.
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.
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.
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.
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.
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.
Transitions move from one state to another, whereas animations have multiple states.
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.
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.
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.
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.