Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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  

  at <RouterView> 

  at <ThemeLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy&nbsp;{&hellip;} > > 

  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?


H
Harshitha 3 years ago
Datatables Vue
7 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

user
Lauris Stepanovs Author 3 years ago

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


H
Harshitha 3 years ago

Hi,

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


user
Lauris Stepanovs Author 3 years ago

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.


H
Harshitha 3 years ago

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



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,
    };
  },
});
user
Lauris Stepanovs Author 3 years ago

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.


H
Harshitha 3 years ago

Hi,

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


user
Lauris Stepanovs Author 3 years ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(