Question

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

<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.但它因无限循环而中断。

我在这里做错了什么？

Answer 1

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

嵌套for循环和意外结果

1 个答案: