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之间的随机整数开始的连续整数，数字环绕吗？

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

1 个答案: