我是 VueJS 的新手,我收到了来自 Vue 的警告,
[Vue warn]: You may have an infinite update loop in a component render function.
当我在 V-bind:style 中使用 V-for 变量时,这是一个示例: 在模板中:
<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>
在脚本中:
data() {
return {
accept: false,
not_accept: false,
};
},
methods: {
test(result) {
if (result == 'accept') {
this.accept = true;
this.not_accept = false;
} else if (result == 'Not accept') {
this.accept = false;
this.not_accept = true;
} else {
console.log(result);
}
return {
success: this.accept,
danger: this.not_accept,
};
},
},
最佳答案
@Decade 对这个问题的看法是正确的。这是确切的问题:
- 您正在使用某些状态值渲染项目列表的渲染方法
NOTE: render method is triggered whenever any state changes
- 然后您尝试根据函数
test
的结果绑定(bind)类,该函数存在缺陷,因为它再次尝试改变状态,从而导致渲染 - 测试 - 渲染循环。
你可以通过让你的测试函数不改变状态来解决这个问题,就像这样:
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,
};
},
}
希望对你有所帮助!
关于node.js - 您可能在组件渲染函数中有无限更新循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43151265/