3***@163.com
3***@163.com
  • 发布:2024-11-15 01:33
  • 更新:2024-11-15 02:03
  • 阅读:60

简单几行代码报错:You may have an infinite update loop in a component render function.

分类:HBuilderX
<template>  
    <view class="content">  
        <view v-for="(item1,key1) in menu_class_name" :key="key1">  
            <view :id="initId(key1)"></view>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                menu_class_name: {"key1":"key2"},  
                nextid:0,  
            }  
        },  
        methods: {  
            initId(key1,key2,key3){  
                this.nextid=this.nextid+1;  
            },  

        },  
    }  
</script>  

简单的几行代码,chrome为什么会报错误:
chunk-vendors.js:18856 [Vue warn]: You may have an infinite update loop in a component render function.

found in

---> at pages/index/index.vue

求大神指点,研究半天没研究出个所以然。。。

2024-11-15 01:33 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com

initId 方法在 v-for 循环中被绑定到 :id 属性上,但是你在 initId 方法中修改了 nextid,这会导致 Vue 认为渲染中 nextid 发生了变化,从而重新触发渲染。这种情况下,可能会造成无限更新循环。

<template>
<view class="content">
<view v-for="(item1, key1) in menu_class_name" :key="key1">
<view :id="getId(key1)"></view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
menu_class_name: { "key1": "key2" },
nextid: 0,
};
},
methods: {
getId(key1) {
this.nextid = this.nextid + 1;
return id-${this.nextid}; // 使用返回的 ID 避免修改数据的副作用
},
},
};
</script>

  • 8***@qq.com

    刚才运行了下,也是一样的报错。因为这样做也会导致data中的数据修改。 看他的意思如果只需要变量递增的话,可以computed: {

    nextid() {

    return this.menu_class_name.length;

    }

    }

    不知道我有没有理解对他的意思。

    2024-11-15 09:24

要回复问题请先登录注册