So it's Friday and I accept that my brain might not be all there but for some reason when I put a ternary operator in my props, it causes an infinite loop and breaks part of my functionality.

Background: reason I'm using a ternary is I'm rendering a table where the left column contains days "Mon, Tues, Wed" etc. I don't want a day name to appear more than once if there are more than 1 instance of that day name.

Code:

// Template
  <tbody>
    <RunInstance 
    v-for="(scheduleItem, index) in term.instances"
    :bars="bars" 
    :day="dateHasNotBeenPassed(scheduleItem) ? lastPassedDay : ''"
    :scheduleItem="scheduleItem" 
    :key="index" />
  </tbody>

// data
  data() {
    return {
      lastPassedDay: ""
    };
  },    

// checking function
dateHasNotBeenPassed(scheduleItem) {
  var date = moment.unix(scheduleItem.startDateTime).format("ddd");

  if (this.lastPassedDay != date) {
    this.lastPassedDay = date;
    return true;
  } else {
    return false;
  }
}

When I use this set up and load up the page I get the "You may have an infinite loop in the render". If I remove :day= then I don't get that error message, but my day names don't render correctly.

Anyone got an insight on what's causing the infinite loop?