Vuejs2 嵌套用于循环和意外结果

我正在vue中开发一个自定义日历组件。早期的模板非常简单：

<template>
  <table class="calendar">
    <tr class="calendar-header">
      <th class="calendar-header-cell"  v-for="headerIndex in 7">
        {{headerIndex}}
      </th>
    </tr>
    <tr class="calendar-body-row" v-for="weekIndex in 5">
        <td class="calendar-body-cell"  v-for="dayIndex in 7">
          {{day++}}
        </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: 'Calendar',
  data () {
    return {
      weekdays : 7,
      day: 0,
    }
  },
}
</script>

问题是我希望得到一个5x7表。在每个单元格中，我希望看到day变量从0到40。但它因为一个无限循环而中断

我做错了什么

使用{day++}时，它基本上会同时渲染day和更新day，这会重新触发渲染，因此它会抱怨无限循环。如果只想显示1到35之间的数字，可以执行以下操作：

---

{{weekIndex-1*weekdays+dayIndex}

您能提供一个JSFIDLE吗？