Add Features with Forms to a Vue.js Reading List Application

In this lab, 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.

We will pick up from where we left off in the "Build a Reading List Application With Vue.js" Lab. We'll add a checkbox, radio buttons, a text area and labels to our BookForm Component. ### Solution The solution can be found in the solution directory.

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.