VueJS - odd behaviour when printing strings within a div

Question

I have a vue component that renders some divs that I'll use as some table's header. What's printed inside those headers is automatically generated as follows:

render (createElement) {
    return createElement('div', { class: 'header' },
      Array.apply(null, { length: this.initHours.length }).map((i) => {
        return createElement('div', { class: 'frame' }, this.getHourIndex())
      })
    )
  }

The function getHourIndex() is:

getHourIndex () {
      console.log(this.initHours)
      const headerData = this.initHours[this.hourIndex]
      this.hourIndex++
      return headerData
    }

It only runs through an array and return each value.

When I run the app, the divs are displayed on the page, with correct results that are shown for a brief period of time. Then, the app's webpage reloads without me doing anything, and all these divs get moved a few pixels up, and are shown empty. Can someone explain to me the reason behind this behaviour?

Can you link to a reproduction (codepen or codesandbox)? – tony19 Feb 19 '21 at 22:05 — tony19, Feb 19 '21 at 22:05

score 0 · Accepted Answer · answered Mar 09 '21 at 15:58

0

If anyone runs to a similar problem, the cause was an infinite loop produced by render, because I was incrementing this.hourIndex in the render function.

Refer to this post to see further:

Infinite loop when using Vue component render function

answered Mar 09 '21 at 15:58

MatiasGSP

75
7

VueJS - odd behaviour when printing strings within a div

1 Answers1