vue3 page doesnt scroll until refresh - css

Question

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 class="enquiry">
<div class="row">
<div class="col-6" v-for="(p, index) in keyAreas" :key="index">
<div class="card" style="margin-bottom: 10px">
<div class="card-body">
<h2 class="card-title">
{{ p.number }}
<span class="card-title" style="float: right">{{ p.title }}</span>
</h2>
<h5 class="card-text">
Properties for rent
<span class="card-title" 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?

Answer 1

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.