VueJS - 在 div 中打印字符串时的奇怪行为

Question

我有一个 vue 组件，可以呈现一些 div，我将用作某些 table 的 header。这些 header 中打印的内容是自动生成的，如下所示：

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

函数 getHourIndex() 是：

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

它只运行遍历一个数组并且 return 每个值。

当我运行应用程序时，div 会显示在页面上，并在短时间内显示正确的结果。然后，应用程序的网页在我不做任何事情的情况下重新加载，所有这些 div 都向上移动了几个像素，并显示为空。有人可以向我解释这种行为背后的原因吗？

Answer 1

如果有人遇到类似问题，原因是渲染产生的无限循环，因为我在渲染函数中递增 this.hourIndex。

参考这个post进一步了解：

VueJS - 在 div 中打印字符串时的奇怪行为

VueJS - odd behaviour when printing strings within a div

html

javascript

syntax

javascript-objects

vue.js