I keep receiving an alert for a possible infinite loop in my code. I suspect it's because I'm modifying a variable within the template's for loop using a method call. Any suggestions on how to resolve this issue? Although the loop does finish executing, I still want to eliminate the warning.
[Vue warn]: You may be stuck in an infinite update loop within a component rendering function.
Here is the snippet of the problematic code:
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>