vue 错误：组件渲染函数中的无限更新循环

Question

我正在制作一个包含随机创建的数字的表格，但是当我在 v-for 中调用 contacts() 时，出于某种原因， 我收到了这个红色警告：

vue.esm.js?efeb:591 [Vue 警告]：您可能在组件渲染函数中有无限更新循环。在 src\App.vue 的---> 中找到

有一堆空数组，比如“[]...”

为什么会这样以及如何解决？

<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>

Answer 1

contacts 方法在渲染期间被调用，其中 this.result.splice() 修改了 this.result，Vue 将检测并安排组件的重新渲染。在渲染期间改变反应组件状态是导致此警告的原因。

因为你实际上并没有使用i，而不是

<tr v-for="i in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]">

你可以的

<tr v-for="i in 17">

我不太确定您要达到的目标。看起来您想渲染一个有 17 行的表格，每行包含从 1-16 之间的随机整数开始的连续整数，并且数字环绕？