Infinite loop warning in vue table rendering

Question

I tried calling a function while rendering a table, and based on condition in the function i assigned that value and displayed it using string interpolation, but i am getting infinite loop error.

Below is url for code

jsfiddle.net/amit_bhadale/5kct0au1/2/

Below is function

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 part

<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

Dont update props multiple times with different values within in render cycle. To seperate those you can just put it into a single component: e.g.:

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