我是VueJS的新手,已经收到Vue的警告,
[Vue warn]: You may have an infinite update loop in a component render function.
当我在V-bind:style中使用V-for变量时,这是一个示例:在template中:
<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,
};
},
},
首先,我不确定您为什么拥有它
not_accept,您不能只使用!this.accept它吗?我不确定100%为什么收到此警告,但这就是我的想法。
对于观察者
v-bind:class是看的变化item.result,this.accept和this.not_accept。这些值的任何更改都将导致通过test再次调用重新呈现它。但中test,你正在修改this.accept和this.not_accept,所以Vue公司需要重新若结果的,因为那改变,这样做可能会改变再检查this.accept和this.not_accept再等。该
class绑定和数据是有缺陷的。class每个项目都将设置为同一事物,但看起来您似乎希望根据来为每个项目自定义样式item.result。您确实不应该修改thisinside的任何属性test。很难给出全面的答案,因为我不确定您的组件如何工作以及应该做什么。