Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding a property to a reactive object within a v-for loop cause error: Maximum recursive updates exceeded in component in the development environment #11807

Closed
heggria opened this issue Sep 4, 2024 · 2 comments · Fixed by #11826
Labels
🐞 bug Something isn't working regression

Comments

@heggria
Copy link
Contributor

heggria commented Sep 4, 2024

Vue version

3.5.0

Link to minimal reproduction

https://play.vuejs.org/#eNp9kk1PwzAMhv+KlQutVDrE16G0Q4A4gMSHgBtBqGu9EWiTKknLUNX/jtMpY0jTDpUsv4/d1457dtE0cdciS1hqCi0aCwZt20y5FHWjtIUeNM4jUPJOtdJiCQPMtaphj6r2zrjkslDSWFCNFRRA5vjg9S3kcl0TBGE27bkET8VdXrVI7IXW+U/sGgY9VCgX9iOBw1MYIghCyKYQ9ENIrQb60snKIXlLLdZNlVukGCAtRQfd/lzpjLNAkBaBCEFI/zvOIPnCH1IFZ2MJQN+DI+Mczn2Q+CADAcPwn5t5bua52Vau8FzhuWIrV3qu9Fy5waUTmskNOtmYlEXMGtr2XCziT6MkPdq4VM4KVTeiQv3g501gVJyWV5X6vh1zVrcY+XzxgcXXlvynWbocZ48aDeoOOVtrNtcLtCv5+vkelxSvxVqVbUX0DvEJjapa53GFXbayJNsb3Oj2Zjw9IRcv5nppURo/lDPqyGHkOaMbvNox+p/do/h4rKNLoi2+d6hdT1rgUXwSH7DhF/tZ+sE=

Steps to reproduce

The error occurs immediately.
P.S.: This bug can be triggered if the total number of updates to a reactive object within a v-for exceeds 100.The following code patterns will all trigger the error.

<script setup>
import { ref, onMounted } from 'vue';

const options = ref([])
onMounted(()=>{
  options.value = Array.from({ length: 34 }, () => ({}))
})
</script>
<template>
  <div v-for="(item, i) in options" :key="i">
    {{ item.a ? item.a : item.a = i }}
    {{ item.b ? item.b : item.b = i }}
    {{ item.c ? item.c : item.c = i }}
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const options = ref([])
onMounted(()=>{
  options.value = Array.from({ length: 21 }, () => ({}))
})
</script>
<template>
  <div v-for="(item, i) in options" :key="i">
    {{ item.a ? item.a : item.a = i }}
    {{ item.b ? item.b : item.b = i }}
    {{ item.c ? item.c : item.c = i }}
    {{ item.d ? item.d : item.d = i }}
    {{ item.e ? item.e : item.e = i }}
  </div>
</template>

What is expected?

This issue does not occur in version 3.4.38. The goal is to prevent the error from occurring again.

What is actually happening?

It’s not confirmed, but I suspect there’s an error in the flushJobs function of runtime-core related to the calculation of count.

System Info

No response

Any additional comments?

In my local development environment, this error causes certain components that work in 3.4.38 (such as those using options in a select) to become unusable, leading to rendering issues.

@edison1105
Copy link
Member

edison1105 commented Sep 4, 2024

a side note: this error only happens in DEV
duplicate of #11712

@wzsgtom
Copy link

wzsgtom commented Sep 5, 2024

渲染 select 组件时报错,等待修复...

@edison1105 edison1105 added 🐞 bug Something isn't working regression labels Sep 5, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Sep 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working regression
Projects
None yet
3 participants