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

Question

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

下面是代码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>

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 true;
        }
      })
      return val
     }
  }
}

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

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

Infinite loop warning in vue table rendering

infinite-loop

vue.js

vue-component

vuejs2