How to Fix Vue Warning: You may have an infinite update loop in a component render function

Question

I am getting the following infinite loop warning. I understand that it is probably because I am changing a variable in my template's for loop due to a method call. Any idea how to fix it? The loop does complete, so it's not actually an infinite loop, but I'd like to fix the warning.

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

Code Snippet:

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>

Answer 1

You are getting that warning because Vue has to re-render for each item in the v-for loop, due to the fact that the for loop updates the component's state. My solution is to compute the result for each array item in one pass, in a computed property (basically an index object), and access that computed property in the v-for rather than using the checkBuildType method.

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>