I have a vue3 web app. My issue is that once I try to navigate to a page using <router-link to ="/Dashboard"/>

Below is the Dashboard.vue

<template>
  <div >
    <div >
      <div  v-for="(p, index) in keyAreas" :key="index">
        <div  style="margin-bottom: 10px">
          <div >
            <h2 >
              {{ p.number }}
              <span  style="float: right">{{ p.title }}</span>
            </h2>
            <h5 >
              Properties for rent
              <span  style="float: right; margin-top: -5px">
                <Doughnut
                  :chart-data="updateChartData(p.number, totalPropertiesNumber)"
                  :width="80"
                  :height="80"
                />
              </span>
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { projectDatabase } from "../../firebase/config";
import getUser from "../../composables/getUser";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale,
} from "chart.js";

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
export default {
  setup() {
    //to get user info e.g email and display name
    const { user } = getUser();
    const company = ref("");
    const keyAreas = ref([]);

    //all LGAs
    const allLGAs = ref([
      { title: "Abuja", number: 0 },
      { title: "Banana Island", number: 0 },
      { title: "Bluewaters Lagos", number: 0 },
      { title: "Benin City", number: 0 },
      { title: "Eko Atlantic", number: 0 },
    ]);

    //Query Function for Specific Locations
    const filterLocation = (item, query, filter) => {
      if (item[filter] === query) {
        return true;
      }
      return false;
    };

    //reference from firebase for user company
    projectDatabase
      .ref("users")
      .child(user.value.uid)
      .child("company")
      .on("value", (snapshot) => {
        company.value = snapshot.val();

        //loop through all LGAs array and update dashboard by filtering each LGA for its properties in its field
        allLGAs.value.forEach(function (p) {
          p.number = Object.keys(snapshot.val())
            .map((key) => {
              snapshot.val()[key].id = key;
              return snapshot.val()[key];
            })
            .filter((item) => {
              return filterLocation(item, p.title, "location");
            }).length;
          if (p.number > 0) {
            keyAreas.value.push(p);
          }
        });
      });

    return {
      allLGAs,
      company,
      keyAreas,
    };
  },
};
</script>

The problem is every time i move to a new page, the page freezes and I have to refresh to see all the items in the v-for loop. This happens to about 3 pages on the web app. Is there a way to solve this?

I have also tried disabling all my browser extensions and things of that nature yet the problem still persists. Could it be because of the size of the array being loaded in the v-for?

CodePudding user response：

OP solved his issue by finding out that Bootstrap v5 adds a class called offcanvas with

overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;

Enabling the scrolling makes it functional again.