close

[Solved] Unhandled error during execution of scheduler flush. This is likely a Vue internals bug

Hello Guys, How are you all? Hope You all Are Fine. Today I am getting the following error while creating slides in Vue.js: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve Unhandled error during execution of scheduler flush. This is likely a Vue internals bug Error?

  1. How To Solve Unhandled error during execution of scheduler flush. This is likely a Vue internals bug Error?

    To Solve Unhandled error during execution of scheduler flush. This is likely a Vue internals bug The error was caused by trying to iterate through a non-iterable (in your case undefined), using v-for. Specifically, before the call made in mount() returns, product.product_images is undefined, because you initiate product as empty object.

Solution 1

The error was caused by trying to iterate through a non-iterable (in your case undefined), using v-for. Specifically, before the call made in mount() returns, product.product_images is undefined, because you initiate product as empty object.

  • instantiate product.product_image as iterable:
//...
  data: () => ({ 
    product: { product_images: [] }
  })

or provide an empty array as fallback in template:

<ion-slide v-for="image in product.product_images || []" v-bind:key="image.id">
  <h1>Slide 1</h1>
</ion-slide> 

or place a v-if on the parent of the v-for:

<ion-slides pager="true" :options="slideOpts" v-if="product.product_images">
  ...
</ion-slides>

Solution 2

Make the entire ProductDetails component suspensibe, by giving it an async setup function. In the setup function, make the call to get the product.
Proof of concept:

//...
async setup() {
  const product = await fetch("http://localhost:4000/api/products/" + 
    this.$route.params.id, {
      method: "get",
    }).then(r => r.json());
  return { product }
}

Now place <product-details> into a <Suspense>‘s <template #default>, providing a fallback template (which will be rendered while <Suspense> resolves all the async components found in its default template):

<Suspense>
  <template #default>
    <product-details></product-details>
  </template>
  <template #fallback>
    Product is loading...
  </template>
</Suspense>

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment