如何解决Vue警告：您可能在组件渲染函数中有一个无限更新循环

Question

如何解决Vue警告：您可能在组件渲染函数中有一个无限更新循环

4

我收到了以下无限循环警告。我明白这可能是因为我在模板的for循环中更改了一个变量，因为调用了一个方法。有什么办法可以解决吗？循环确实完成了，所以它实际上并不是一个无限循环，但我想修复警告。

[Vue warn]: You may have an infinite update loop in a component render function.

代码片段：

new Vue({
  el: '#app',
  data: {
    contents: {"34": {"id": 34, build_name: "email_simple", build_readable: "Email"},"35": {"id": 35, build_name: "email_complex", build_readable: "Email"},"36": {"id": 36, build_name: "email_half", build_readable: "Email"}},
    last_build_type: '',
    contents_tree: [34,35,36]
  }, 
  methods: {
      checkBuildType(id){
        let check = false;
        if(this.last_build_type !== this.contents[id].build_name){
            check = true
        }
        this.last_build_type = this.contents[id].build_name;
        return check
      }

  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="(id, i) in contents_tree">
      <div v-bind:key="i + '_' + id" class="inline">
          <template v-if="checkBuildType(id)">
              {{i}} - {{id}} -
              {{contents[id].build_readable}}
              <br>
            
          </template>

    </div>
  </template>
</div>

- Jordan

contents_tree是什么？我认为我们需要更多的代码来查看实际上是什么导致了错误。 - depperm

请发布精确的错误信息。 - adiga

我已经添加了其余的代码。页面上还有更多的代码，但我已经将它们全部注释掉了，错误是从这里出现的。我添加了准确的错误信息。 - Jordan

1

很高兴能够帮忙，但请提供可运行的CodePen或其他完整的代码片段以重现错误。https://stackoverflow.com/help/minimal-reproducible-example - AlexMA

2

@AlexMA，我已经添加了产生错误的代码片段。 - Jordan

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlexMA · Accepted Answer

您之所以收到该警告是因为Vue必须重新渲染v-for循环中的每个项目，由于循环更新了组件的状态。我的解决方案是在计算属性（基本上是一个索引对象）中一次性计算每个数组项的结果，并在v-for中访问该计算属性，而不是使用checkBuildType方法。

new Vue({
  el: '#app',
  data: {
    contents: {
      "33": {
        "id": 33,
        build_name: "email_half",
        build_readable: "Email"
      },
      "34": {
        "id": 34,
        build_name: "email_simple",
        build_readable: "Email"
      },
      "35": {
        "id": 35,
        build_name: "email_complex",
        build_readable: "Email"
      },
      "36": {
        "id": 36,
        build_name: "email_half",
        build_readable: "Email"
      },
      "37": {
        "id": 37,
        build_name: "email_half",
        build_readable: "Email"
      }
    },
    last_build_type: '',
    contents_tree: [34, 35, 36, 37, 33]
  },
  computed: {
    buildTypes() {
      const buildTypesMap = {};
      for (id of this.contents_tree) {
        buildTypesMap[id] = this.checkBuildType(id);
      }
      return buildTypesMap
    }
  },
  methods: {
    checkBuildType(id) {
      let check = false;
      if (this.last_build_type !== this.contents[id].build_name) {
        check = true
      }
      this.last_build_type = this.contents[id].build_name;
      return check
    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="(id, i) in contents_tree">
      <div v-bind:key="i + '_' + id" class="inline">
          <template v-if="buildTypes[id]">
              {{i}} - {{id}} -
              {{contents[id].build_readable}}
              <br>
            
          </template>

</div>
</template>
</div>