Table of Contents

1. Challenge

   Enhancing the BookForm Component

   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.

2. Challenge

   Dynamically Show and Hide Text

   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.

3. Challenge

   Filtering the Books List

   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.

4. Challenge

   Adding a Search Functionality

   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.