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

【问题标题】：VueJS - odd behaviour when printing strings within a divVueJS - 在 div 中打印字符串时的奇怪行为
【发布时间】：2021-05-22 21:57:01
【问题描述】：

我有一个 vue 组件，它呈现一些我将用作某些表的标题的 div。这些标题中打印的内容会自动生成如下：

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
    }

它只遍历一个数组并返回每个值。

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

【问题讨论】：

你能链接到一个复制品（codepen 或 codesandbox）吗？

标签： javascript html vue.js syntax javascript-objects

【解决方案1】：

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

【讨论】：