In Chapter 1, Getting Started with Vue.js, we covered the data, computed, and method objects within Vue and how to display static data values. In this chapter, were are going to cover:
- Displaying lists and more complex data with Vue using v-if, v-else, and v-for
- Filtering the lists using form elements
- Applying conditional CSS classes based on the data
The data we are going to be using is going to be randomly generated by the JSON generator service (http://www.json-generator.com/). This website allows us to get dummy data to practice with. The following template was used to generate the data we will be using. Copy the following into the left-hand side to generate data of the same format so the attributes match with the code examples, as follows:
[
'{{repeat(5)}}',
{
index: '{{index...