Routing is not working as expected after integrated API calls

Hi Team,

It seems to be routing is not working as expected like it doesnt render the data to the datatables when naviagting from one screen to another.

And I get to see the this console error

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
at <RouterView>
at <ThemeLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
warn @ runtime-core.esm-bundler.js?d2dd:38
logError @ runtime-core.esm-bundler.js?d2dd:212
handleError @ runtime-core.esm-bundler.js?d2dd:204
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:158
flushJobs @ runtime-core.esm-bundler.js?d2dd:396
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?d2dd:285
queueCb @ runtime-core.esm-bundler.js?d2dd:307
queuePostFlushCb @ runtime-core.esm-bundler.js?d2dd:313
queueEffectWithSuspense @ runtime-core.esm-bundler.js?d2dd:1582
scheduler @ runtime-core.esm-bundler.js?d2dd:1804
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:384
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
set value @ reactivity.esm-bundler.js?89dc:1044
finalizeNavigation @ vue-router.mjs?083c:3307
eval @ vue-router.mjs?083c:3180
Promise.then (async)
pushWithRedirect @ vue-router.mjs?083c:3151
push @ vue-router.mjs?083c:3078
navigate @ vue-router.mjs?083c:2171
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:369
runtime-dom.esm-bundler.js?2725:35 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (runtime-dom.esm-bundler.js?2725:35:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5662:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at flushJobs (runtime-core.esm-bundler.js?d2dd:396:1)
parentNode @ runtime-dom.esm-bundler.js?2725:35
componentUpdateFn @ runtime-core.esm-bundler.js?d2dd:5662
run @ reactivity.esm-bundler.js?89dc:185
instance.update @ runtime-core.esm-bundler.js?d2dd:5694
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
flushJobs @ runtime-core.esm-bundler.js?d2dd:396
Promise.then (async)
nextTick @ runtime-core.esm-bundler.js?d2dd:246
eval @ Layout.vue?0147:97
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
job @ runtime-core.esm-bundler.js?d2dd:1782
flushPreFlushCbs @ runtime-core.esm-bundler.js?d2dd:328
flushJobs @ runtime-core.esm-bundler.js?d2dd:371
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?d2dd:285
queueCb @ runtime-core.esm-bundler.js?d2dd:307
queuePostFlushCb @ runtime-core.esm-bundler.js?d2dd:313
queueEffectWithSuspense @ runtime-core.esm-bundler.js?d2dd:1582
scheduler @ runtime-core.esm-bundler.js?d2dd:1804
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:384
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
set value @ reactivity.esm-bundler.js?89dc:1044
finalizeNavigation @ vue-router.mjs?083c:3307
eval @ vue-router.mjs?083c:3180
Promise.then (async)
pushWithRedirect @ vue-router.mjs?083c:3151
push @ vue-router.mjs?083c:3078
navigate @ vue-router.mjs?083c:2171
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:369

Can you please suggest me what could be the issue?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

Hi,

We were not able to reproduce this error, if there are any steps on how to reproduce it please describe them.
Do you have this error on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/#/dashboard

Hi,

Not sure it keeps coming for me very oftenly. Can you please suggest an advice to me?

Hi,

Could you please provide more info about the issue?

It looks like this issue might not be related to the router but to your component implementation.

Hi,

Yeah sure, please find the below code snippets for one of my component for one screen and do let me know if you need any other information. Please suggest some solution

<template>
<div class="row mb-5">
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0">
<inline-svg src="media/icons/duotune/general/mail-open.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">267</div>
<div class="fw-bold font-12 line-h-15 text-black-500">Urgent</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0 text-black-100">
<inline-svg src="media/icons/duotune/general/user.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">31</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
New Opportunities
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0 text-black-100">
<inline-svg src="media/icons/duotune/general/gen016.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">89</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
Unassigned Opportunities
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0">
<inline-svg src="media/icons/duotune/general/chat.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">54</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
Follow-Ups Today
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0">
<inline-svg src="media/icons/duotune/general/chat.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">183</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
Follow-Ups Overdue
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body pt-0">
<el-skeleton class="pt-5" :rows="5" animated v-if="loading" />
<Datatable
:data="tableData"
:header="tableHeader"
v-if="!loading"
:enable-items-per-page-dropdown="true"
>
<template v-slot:user_name="{ row: item }">
<div
class="d-flex align-items-center flex-row-fluid position-relative ms-4"
>
<span class="font-14 line-h-17 fw-bolder text-black-100 me-2">
{{ item.user_name }}
</span>
<span
class="badge me-2 rounded bg-gold-100 fw-bolder text-black-300 font-11 line-h-13 px-2 py-1"
>
{{ item.opportunity_count }}
</span>
<span
class="position-absolute top-0 start-0 translate-middle badge rounded fw-bolder text-black-300 font-11 line-h-13 px-2 py-1"
:class="
item.user_type_name === 'Lead' ? 'bg-blue-100' : 'bg-gold-200'
"
>
{{ item.user_type_name === "Lead" ? "L" : "C" }}
</span>
</div>
<div class="d-flex mt-2 ms-4">
<span class="font-13 line-h-16 text-black-300 fw-semibold me-2">
{{ item.contact_no }}
</span>
<span
class="font-10 line-h-12 text-black-300 fw-semibold badge bg-transaparent border px-2 py-1"
>{{ item.branch_name }}</span
>
</div>
</template>
<template v-slot:source_name="{ row: item }">
<span
class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1"
>
{{ item.source_name }}
</span>
</template>
<template v-slot:responsible="{ row: item }">
<span
class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1"
v-if="item.responsible"
>
{{ getInitials(item.responsible.name) }}
</span>
</template>
<template v-slot:treatments="{ row: item }">
<template v-for="(val, index) in item.treatments" :key="index">
<div
class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1 ms-2"
>
{{ val.name }}
</div>
</template>
</template>
<template v-slot:enquiry_date="{ row: item }">
<div class="d-flex flex-column">
<span class="font-13 line-h-16 fw-semibold text-black-300 mb-1">{{
dateFormat(item.enquiry_date)
}}</span>
<span class="d-flex font-13 line-h-16 fw-bold text-black-300"
>{{ dateFormat(item.follow_up_date) }}
<span class="svg-icon svg-icon-2 text-black-100 m-0 ms-1">
<inline-svg src="media/icons/duotune/arrows/arr050.svg" />
</span>
</span>
</div>
</template>
<template v-slot:updated_at="{ row: item }">
<div class="d-flex flex-column">
<span class="font-13 line-h-16 fw-semibold text-black-300 mb-1">{{
dateFormat(item.updated_at)
}}</span>
<div class="d-flex">
<span
class="badge bg-gray-100 fw-semibold text-black-300 font-11 line-h-13 px-2 py-1"
>
<span class="svg-icon svg-icon-5 m-0 me-1">
<inline-svg src="media/icons/comment.svg" />
</span>
2
</span>
<span
class="badge bg-gray-100 fw-semibold text-black-300 font-11 line-h-13 px-2 py-1 ms-2"
>
<span class="svg-icon svg-icon-5 m-0 me-1">
<inline-svg src="media/icons/phone.svg" />
</span>
2
</span>
</div>
</div>
</template>
<template v-slot:status="{ row: item }">
<template v-for="(val, index) in statusTags">
<span
class="badge fw-semibold text-black-300 font-11 line-h-13 px-2 py-1"
:style="
val.outline
? `border: 1px solid ${val.color}`
: `background: ${val.color}`
"
:key="index"
v-if="item.status === val.id"
>{{ val.name }}</span
>
</template>
</template>
<template v-slot:actions="{ row: item }">
<div class="d-flex justify-content-end">
<a
class="btn btn-icon me-2 w-32px h-32px"
:class="item.status === 20 ? 'bg-red-100' : 'bg-gray-100'"
@click="flagStatus(item.id)"
><span
class="svg-icon svg-icon-2"
:class="item.status === 20 ? 'text-white' : 'text-black-100'"
>
<inline-svg src="media/icons/duotune/maps/map001.svg" /> </span
></a>
<a
class="btn btn-icon bg-gray-100 w-32px h-32px"
@click="editItem(item.id)"
>
<span class="svg-icon svg-icon-2 text-black-100">
<inline-svg
src="media/icons/duotune/general/gen055.svg"
/> </span
></a>
<a ></a>
</div>
</template>
</Datatable>
</div>
</div>
<editOpportunity></editOpportunity>
</template>

import { defineComponent, ref, onMounted, inject } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
import { setCurrentPageTitle } from "@/core/helpers/breadcrumb";
import editOpportunity from "@/forms/opportunities/editOpportunity.vue";
import ApiService from "@/core/services/ApiService";
import statusTags from "@/composables/Status";
import { getInitials, dateFormat } from "@/composables/General";
export default defineComponent({
name: "Opportunities-screen",
components: {
Datatable,
editOpportunity,
},
setup() {
const emitter = inject("emitter");
let loading = ref(false);
const payload = ref({});
const tableData = ref([]);
const tableHeader = ref([
{
columnName: "Name",
columnLabel: "user_name",
sortEnabled: true,
},
{
columnName: "Source",
columnLabel: "source_name",
sortEnabled: true,
},
{
columnName: "Treatments",
columnLabel: "treatments",
sortEnabled: true,
},
{
columnName: "Staff",
columnLabel: "responsible",
sortEnabled: true,
},
{
columnName: "Enquiry",
columnLabel: "enquiry_date",
sortEnabled: true,
},
{
columnName: "Updated",
columnLabel: "updated_at",
sortEnabled: true,
},
{
columnName: "Status",
columnLabel: "status",
sortEnabled: true,
},
{
columnName: "Actions",
columnLabel: "actions",
sortEnabled: false,
},
]);

emitter.on("refreshOpportunities", (value) => {
fetchOpportunities();
});

async function fetchOpportunities() {
loading.value = true;
await ApiService.setHeader();
await ApiService.post("opportunity/get", payload)
.then((resource) => {
loading.value = false;
tableData.value = resource.data.data.data;
})
.catch((error) => {
console.log(error);
});
}

async function editItem(id) {
document.getElementById("kt_edit_opportunity_toggle").click();
emitter.emit("editOpportunityItem", id);
}

async function flagStatus(id) {
await ApiService.setHeader();
await ApiService.post("opportunity/update-status", { id: id, status: 20 })
.then((resource) => {
if (resource.data.result === "success") {
fetchOpportunities();
}
})
.catch((error) => {
console.log(error);
});
}

onMounted(() => {
setCurrentPageTitle("Opportunities");
fetchOpportunities();
});
return {
tableHeader,
tableData,
loading,
editItem,
statusTags,
flagStatus,
getInitials,
dateFormat,
emitter,
};
},
});

Hi,

The problem is in a place where you are setting tableData property.

Instead of

tableData.value = resource.data.data.data;

try
tableData.value.splice(0, tableData.value.length, ...resource.data.data.data.value);

Also, you can try to put console log in your .then function to verify that data is received correctly.

Hi,

Many thanks, for the suggestion. Sure let me try this solution and keep you updated if that works fine.

Sure, let me know if you will need any additional help.

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(