Add Features with Forms to a Vue.js Reading List Application
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
- 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.
- 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.
- 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.
- 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.
- 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.