Skills Expanded

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.
Enhancing the BookForm Component
  • 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
  • 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
  • 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
  • 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.

About the author

Carolina Powers is a Software Engineer at Pluralsight with a background in teaching and a passion for learning. When she is not working, she enjoys spending time with her family, traveling, going to the beach, being active and teaching her son a new language.

Ready to upskill? Get started