您可能在组件渲染函数中有无限更新循环 [英] You may have an infinite update loop in a component render function

问题描述

我是 VueJS 的新手，我收到了来自 Vue 的警告，

I'm new to VueJS, I've got warning from Vue,

[Vue warn]: You may have an infinite update loop in a component render function. 

当我在 V-bind:style 中使用 V-for 变量时，这里是一个例子:在模板中:

When i use V-for variable in V-bind:style, here is an example : in template :

<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>

在脚本中:

推荐答案

@Decade 关于这个问题是正确的.这是确切的问题:

1. You are in render method rendering the list of item using some state value

1. 您正在使用一些状态值渲染项目列表的渲染方法

<块引用>

注意:每当任何状态改变时都会触发渲染方法

NOTE: render method is triggered whenever any state changes

1. 然后您尝试根据函数 test 的结果绑定类，此函数存在缺陷，因为它再次尝试改变状态，从而导致渲染 - 测试 - 渲染循环.

1. Then you are trying to bind the class based on a result of function test this function is flawed as it is again trying to mutate the state, thus causing the render - test - render cycle.

你可以通过让你的测试函数不改变状态来解决这个问题，就像这样:

You can solve this problem by making your test function not mutate the state instead, like so:

methods: {
    test(result) {
        let accept;
        if (result == 'accept') {
            accept = true;
        } else if (result == 'Not accept') {
            accept = false;
        } else {
            console.log(result);
        }

        return {
            success: accept,
            danger: !accept,
        };
    },
}

希望有所帮助！

这篇关于您可能在组件渲染函数中有无限更新循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！