Question

我是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,
        };
    },
},

Answer 1

@Decade对这个问题是正确的。这是确切的问题：

您正在渲染方法中使用某个州值

注意：只要状态发生任何变化，就会触发渲染方法

然后你试图根据函数test的结果绑定类这个函数是有缺陷的，因为它再次试图改变状态，从而导致渲染 - 测试 - 渲染周期。

您可以通过使测试函数不改变状态来解决此问题，如下所示：

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,
        };
    },
}

我希望有所帮助！

Answer 2

首先，我不确定你为什么not_accept，你不能只使用!this.accept吗？

我不是百分百肯定你为什么会收到这个警告，但这就是我的想法。

v-bind:class的观察者正在关注item.result，this.accept和this.not_accept的变化。这些值的任何更改都将通过再次调用test来重新呈现它。但是在test范围内，您正在修改this.accept和this.not_accept，因此如果结果因此而改变，Vue需要再次重新检查，并且这样做可能会更改{{} 1}}和this.accept 再次，等等。

this.not_accept绑定和数据存在缺陷。每个项目的class将设置为相同的内容，但看起来您希望每个项目都有自定义样式，具体取决于class。你真的不应该在item.result内修改this的任何属性。

很难给出一个彻底的答案，因为我不完全确定你的组件是如何工作的以及它应该做什么。

Answer 3

如果调用函数而不是在vue指令中传递函数，则会出现此错误。这是一个例子：

我制作了自定义directive to load data via AJAX when a boostrap tab is displayed。

这很糟糕：

 v-on-show-bs-tab="getFirstPageSites()"

这里，vue似乎调用函数（或者更确切地说是表达式）并将结果传递给指令。

这很好：

 v-on-show-bs-tab="getFirstPageSites"

这里我按名称传递函数，以便我可以在指令中调用它。

Answer 4

我犯了在组件中使用 :click 而不是 @click 的愚蠢错误后遇到了同样的错误

Answer 5

我做错了什么：

我在使用数据时没有使用箭头函数

例如：

data() {
  state: {
     foo: 'bar'
  }
},
created() {
  bus.$on('data_change', function(data) {
    this.state = Object.assign({}, this.state, data); <-- this will cause an infinite loop
  });
}

改用箭头函数：

created() {
  bus.$on('data_change',(data) => {
    this.state = Object.assign({}, this.state, data);
  });
}

认为它看起来像一个常见的错误

Answer 6

我不小心做了类似的事情，用未经训练的眼睛不容易发现：在过滤器中的数组上调用 .sort()。 sort 改变数组，从而使组件重新渲染。解决方案是先slice数组并创建一个浅拷贝，然后排序。不好：

 filters: {
    sortedDays(days) {
      return days.sort().join(', ');
    },
  },

好：

 filters: {
    sortedDays(days) {
      return days.slice().sort().join(', ');
    },
  },

您可能在组件呈现函数

6 个答案:

这很糟糕：

这很好：