vue error: infinite update loop in a component render function

Question

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>

Decade Moon Decade Moon · Accepted Answer · 2018-06-20T12:33:34

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?

vue error: infinite update loop in a component render function

1 Answers