数组长度大于100时,在 v-for中修改数组项属性报错 #11712
Description
Vue version
vue.3.5.0-beta.3
Link to minimal reproduction
Steps to reproduce
<script>
export default {
data() {
return {
dataList: [],
};
},
mounted() {
this.getData();
},
methods: {
getStyle(item, i) {
if (item.style) {
return item.style;
}
item.style = `--i:${i};`;
return item.style;
},
getData() {
//当数组长度大于100时,在getStyle函数中写 item.style = `--i:${i};`;会导致 Maximum recursive updates exceeded in component <Repl>.的异常
//此异常在vue.3.5.0-beta.2,vue.3.5.0-beta.3的开发环境存在;生成环境不存在
this.dataList = new Array(101).fill().map((item, i) => {
return { i };
});
}
},
}
</script>
<template>
<div v-for="(item, i) in dataList" :key="i" :style="getStyle(item, i)">
{{ item }}
</div>
</template>What is expected?
What is actually happening?
Uncaught (in promise): 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.
System Info
No response
Any additional comments?
No response