I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using
<router-link to ="/Dashboard"/>Here is the code for 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 arises every time I move to a new page, causing the page to freeze. I must refresh the page to visualize all items in the v-for loop. This issue impacts about three pages on the web app. Is there any solution to this problem?
Despite disabling all browser extensions and similar measures, the problem persists. Could it be due to the size of the array being loaded in the v-for?