What you'll learn
In this project, you’ll follow along with our instructions and use forms and Vue.js to add features to the application built in the Build a Reading List Application With Vue.js project.
Table of contents
Setup
15m
- Set up your local environment for projects. We'll walk you through everything you need to know, including how to install and configure your environment to be able to complete all of the tasks.
Enhancing the BookForm Component
20m
- We will pick up from where we left off in the "Build a Reading List Application With Vue.js" project. We'll add a checkbox, radio buttons, a text area and labels to our BookForm Component.
Dynamically Show and Hide Text
15m
- Refactor our BookList component to work with the bookData object received from the BookForm component. Then, we will use v-if and v-else directives in the BookItem component to dynamically show the text "Read" or "Not Read" depending on the bookData.finishedReading property.
Filtering the Books List
30m
- Create a drop-down list that will allow us to filter our books based on ownership - bought or borrowed. Upon creating the drop-down and binding it's data with v-model, we will display a second list of books that will use a Vue.js computed property called filteredBooks.
Adding a Search Functionality
15m
- In this last module we'll add a searchedBooks computed property that will filter out books that match the v-model value of the search input element.
