node.js 您可能在组件渲染函数中有无限更新循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43151265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
You may have an infinite update loop in a component render function
提问by ramzi trabelsi
I'm new to VueJS, I've got warning from Vue,
我是 VueJS 的新手，我收到了来自 Vue 的警告，
[Vue warn]: You may have an infinite update loop in a component render function.
When i use V-for variable in V-bind:style, here is an example : in template :
当我在 V-bind:style 中使用 V-for 变量时，这是一个示例：在模板中：
<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>
in script :
在脚本中：
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,
};
},
},
采纳答案by aks
@Decade is right about the problem. Here is the exact problem:
@Decade 关于这个问题是正确的。这是确切的问题：
- You are in render method rendering the list of item using some state value
- 您正在使用一些状态值呈现项目列表的渲染方法
NOTE: render method is triggered whenever any state changes
注意：每当任何状态发生变化时都会触发渲染方法
- Then you are trying to bind the class based on a result of function
testthis function is flawed as it is again trying to mutate the state, thus causing the render - test - render cycle.
- 然后你试图根据函数的结果绑定类，
test这个函数有缺陷，因为它再次尝试改变状态，从而导致渲染 - 测试 - 渲染循环。
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,
};
},
}
I hope that helped!
我希望有帮助！
回答by Decade Moon
First, I'm not sure why you have not_accept, can't you just use !this.acceptin its place?
首先，我不确定你为什么有not_accept，你不能!this.accept在它的位置使用吗？
I'm not 100% sure why you're getting this warning, but here's what I think.
我不是 100% 确定您为什么会收到此警告，但这是我的想法。
The watcher for v-bind:classis watching for changes to item.result, this.acceptand this.not_accept. Any change in those values will cause it to be re-rendered by calling testagain. But within test, you're modifying this.acceptand this.not_accept, so Vue needs to re-check again if the result has changed because of that, and in doing so it may change this.acceptand this.not_acceptagain, and so on.
的观察者v-bind:class正在观察item.result、this.accept和 的变化this.not_accept。这些值的任何更改都将导致它通过test再次调用重新呈现。但中test，你正在修改this.accept和this.not_accept，所以Vue公司需要重新若结果的，因为那改变，这样做可能会改变再检查this.accept和this.not_accept再等。
The classbinding and the data is flawed. classfor each of the items will be set to the same thing, but it looks as though you want a custom style for each item depending on item.result. You really shouldn't be modifying any properties of thisinside test.
该class绑定和数据是有缺陷的。class对于每个项目将被设置为相同的东西，但看起来好像你想要每个项目的自定义样式取决于item.result. 你真的不应该修改thisinside 的任何属性test。
It's hard to give a thorough answer because I'm not completely sure of how your component works and what it should do.
很难给出一个彻底的答案，因为我不完全确定您的组件如何工作以及它应该做什么。
回答by Jess
You can get this error if you call a function instead of pass a function in a vue directive. Here is an example:
如果调用函数而不是在 vue 指令中传递函数，则会出现此错误。下面是一个例子：
I made a custom directive to load data via AJAX when a boostrap tab is displayed.
当显示 boostrap 选项卡时，我创建了一个自定义指令以通过 AJAX 加载数据。
This is bad:
这不好：
v-on-show-bs-tab="getFirstPageSites()"
Here, vue appears to call the function (or rather evaluate the expression) and pass the result to the directive.
在这里，vue 似乎调用了函数（或者更确切地说是计算表达式）并将结果传递给指令。
This is good:
这很好：
v-on-show-bs-tab="getFirstPageSites"
Here I am passing the function by name such that I can call it in the directive.
在这里，我按名称传递函数，以便我可以在指令中调用它。
