Maximum recursive updates exceeded in component <Carousel>

[bhojkamal]

app.js?v=1.1.5:10445 [Vue warn]: Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

This is what I get on my console as warning. but it is working on local. but on live it is error and not working. On live I got, RangeError: Maximum call stack size exceeded and Uncaught (in promise) RangeError: Maximum call stack size exceeded Even I route to different. It is not working. It is seriously not working on live.

How can I fix this? I've used laravel 8 at backend and vue 3 at frontend.

[bhojkamal]

Hello, this issue downed my projects. If I don't use it, it is working fine. I tried from this below closed issue as well but didn't work. Passing v-model leads to Uncaught error: RangeError: Maximum call stack size exceeded #98

[gustavothinassi]

Ola, tambem estou com o mesmo problema. Voce conseguiu resolver?

[bhojkamal]

@gustavoAlunoFG I tried a lot. In even in 2 weeks, no one response here. I shift to swiper package. Swiper worked without any issue.

[LanShih]

When I gave a list and used v-for in "Slide", I had met the warning too. My solution is using v-if out of "Carousel" and then the warning is gone.

[buruno]

just to make your solution clearer, @LanShih (thanks, btw): adding a v-if="items.length" on the carousel component worked for me. I believe the component is being initialized before the data is set.

[zpliu1126]

just to make your solution clearer, @LanShih (thanks, btw): adding a v-if="items.length" on the carousel component worked for me. I believe the component is being initialized before the data is set.

The solution in my case is not to render the entire component with v-if when props carouselList is empty.

  <Carousel v-if="carouselList.length!==0" :settings="settings" :breakpoints="breakpoints" class="carousel1">
    <Slide
      v-for="(slide, index) in carouselList"
      :key="index"
      class="carousel__slide"
    >
 </Slide>
    <template #addons>
      <Pagination></Pagination>
      <Navigation />
    </template>
  </Carousel>

[mmvahora]

Thanks you guys! I've had this problem for a while but just ignored it while I finished up other things. Got around to hosting my site finally and had the exact same issues as @bhojkamal, was pulling my hair out trying to find a solution. Adding a v-if to the carousel component got it working with no more recursion errors. I was doing all sorts of hacky things to try to get it fixed, and the answer was so simple lol

[xrayian]

When I gave a list and used v-for in "Slide", I had met the warning too. My solution is using v-if out of "Carousel" and then the warning is gone.

I did the same thing but forgot to add the '.length' xD

[ismail9k]

This issues should be solved in the latest version

[ahmadatefahmad]

In my case I don't need to add v-if since the data array can't be empty & it's not even about the model-value, but the mouseDrag & touchDrag props, as I'm listening to mouse & touch events of an element inside the I get that Vue warn when these events are triggered.

basically what I wanna achieve - and actually still achieved regardless of the warning - is to disable dragging when hovering over a quasar q-scroll-area component inside the so I can scroll inside it instead of drag the carousel elements

I updated to the latest version & the problem still persists