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

Question

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

下面是代码的网址

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>

Answer 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 val
     }
  }
}

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