5. Quiz 5 Vue 3 Fundamentals

Please complete the following tasks in a Vue 3 application to build a functional Book Manager component.

---

Given the following book array,

[
  {
    id: "b1",
    title: "1984",
    author: "George Orwell",
    year: 1949,
    genres: ["Fiction", "Dystopia"],
  },
  {
    id: "b2",
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    genres: ["Fiction", "Tragedy"],
  },
  {
    id: "b3",
    title: "Sapiens: A Brief History of Humankind",
    author: "Yuval Noah Harari",
    year: 2011,
    genres: ["History"],
  },
  {
    id: "b4",
    title: "Educated",
    author: "Tara Westover",
    year: 2018,
    genres: ["Memoir"],
  },
  {
    id: "b5",
    title: "Moby Dick",
    author: "Herman Melville",
    year: 1851,
    genres: ["Fiction", "Adventure"],
  },
  {
    id: "b6",
    title: "Brave New World",
    author: "Aldous Huxley",
    year: 1932,
    genres: ["Fiction", "Dystopia"],
  },
];

1. Create a Book.vue component that receives the following properties:

   • title (string)

   • author (string)

   • year (number)

   • genres (array of strings)

   • The component should display the title, author, year, and genres.

2. Display Books Using v-for in App.vue

   In App.vue, define a list of books using the provided array. Use the Book.vue component created in Q1 to display each book using v-for.

3. Filter Fiction Books

   In App.vue, add a checkbox that allows users to toggle between showing only Fiction books and all books. You can choose any method or approach to implement this functionality. The goal is to ensure that the list of books updates dynamically based on whether the “Show Fiction Only” option is selected.

Test your solutions on play.vuejs.org: