我是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
。您确实不应该修改this
inside的任何属性test
。很难给出全面的答案,因为我不确定您的组件如何工作以及应该做什么。