Vue Computed Property Returns NaN

Question

I am trying to make a pagination for my Bostorek project. I used computed property to calculate the start index and end index then slice the array of book objects to show the necessary part of that array. The computed property returns NaN everytime even though when I try to print it on the div element it does not give the result of Nan.

<template>
  <section>
      <div class="container">
          <SectionHeader :title="'Books'" :text="'Books Text'" />
          <BookList :books="paginatedBooks" />
          <Pagination :currentPage="currentPage" :totalPages="totalPages" />
          {{Math.ceil(books.length / itemsPerPage)}} //This returns expected value
          {{totalPages}} //This returns NaN
      </div>
  </section>
</template>

<script setup>
    import SectionHeader from '../components/SectionHeader.vue';
    import BookList from '../components/BookList.vue';
    import booksDb from '../db.js';
    import { ref, computed } from 'vue';
    import Pagination from '../components/Pagination.vue';

    const books = ref(booksDb);
    const currentPage = ref(1);
    const itemsPerPage = ref(4);
    const totalPages = computed(() => {
        return Math.ceil(books.length / itemsPerPage) //This returns NaN
    });
    const paginatedBooks = computed(() => {
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        return books.value.slice(startIndex, endIndex);
    });
</script>

<style scoped>
    .auth-box {
        margin-top: -30px;
    }
</style>

I tried to look at the docs and other questions but could not find anything.

Answer 1

When a variable is defined using ref(), its value should be accessed using .value. In your case, the access using .value is missing for books and itemsPerPage.