I'm making a table that contains randomly created numbers, but when I called contacts() in v-for, for some reason, I'm getting this red warning:
vue.esm.js?efeb:591 [Vue warn]: You may have an infinite update loop in a component render function.found in---> at src\\App.vue
with bunch of empty arrays like "[]..."
Why is this is and how to fix it?
<template>
<div id="app">
<table border=1 width =50% id="list">
<tr v-for="i in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]">
<td v-for="contact in contacts()">{{contact}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: "App",
data: function() {
return {
result: [],
row: Math.floor(Math.random() * 16) + 1
}
},
created() {
let start = Math.floor(Math.random() * 16) + 1
for (var i = 0; i < 16; i++) {
this.result[i] = start++
if (start > 16) start = 1
}
},
methods: {
contacts: function() {
let snapshot = this.result.splice(0, this.row)
console.log(snapshot)
return snapshot
}
}
}
</script>
The contacts
method is being called during the render , which has this.result.splice()
that modifies this.result
, which Vue will detect and schedule a re-render of the component. Mutating reactive component state during a render is the cause of this warning.
Since you're not actually using i
, instead of
<tr v-for="i in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]">
you can do
<tr v-for="i in 17">
I'm not exactly sure what you're trying to achieve. It looks like you want to render a table with 17 rows, each row containing consecutive integers starting at a random integer between 1-16 and the numbers wrap around?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.