vue表渲染中的无限循环警告答案

【问题标题】：Infinite loop warning in vue table renderingvue表渲染中的无限循环警告
【发布时间】：2020-09-13 02:40:42
【问题描述】：

我尝试在渲染表格时调用一个函数，并根据函数中的条件分配了该值并使用字符串插值显示它，但出现无限循环错误。

下面是代码的url

jsfiddle.net/amit_bhadale/5kct0au1/2/

下面是函数

checkData(day, time){
        let that = this
        let result = this.serverData.some(a=>{
            if(a.Day === day && a.Time === time){
                that.cellId = a.id 
                // This is giving infinite loop error

                // if i chnage it to this then it works
                // that.cellId = 'Some normal string'
            }
            return (a.Day === day && a.Time === time)
        })
        return result
    }

HTML 部分

<table>
        <tr v-for="(time, i) in time" :key="i">
            <td v-for="(day, j) in day" :key="j">
                <span v-if="checkData(day, time)">

                </span>
                <span v-else>
                    No data in this cell
                </span>
            </td>
        </tr>
    </table>

【问题讨论】：

您可以在控制台看到无限循环警告。谢谢。
虽然非常欢迎 JSFiddles 帮助他人重现您的问题，但通常希望您将代码（至少是似乎导致错误的部分）也放入您的问题本身。
@DelenaMalan 感谢您告诉我。我已经更新了问题
我认为这是警告的原因：that.cellId = a.id 当您修改可能触发渲染周期内的渲染周期的属性时
@Estradiaz 我们如何解决这个问题？

标签： vue.js vuejs2 vue-component infinite-loop

【解决方案1】：

不要在渲染周期内使用不同的值多次更新道具。要将它们分开，您可以将其放入单个组件中：例如：

{
  props: ['time', 'day', 'serverData'],
  computed: {
    cellValue(){
      let val = "No data in this cell"
      this.serverData.some(a=>{
        if(a.Day === this.day && a.Time === this.time){
            val = a.id;return true;
        }
      })
      return val
     }
  }
}

<template>
  <span>cellValue</span>
</template>

【讨论】：