CODEWITHSUNDEEP
vuejs2
mannuk
mannuk

Reputation: 1269

Nested for loops and unexpected results

I'm developing a custom calendar component in vue. The early template is quite simple:

<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>

the problem is that I expect to get a 5x7 table. In each cell I expect to see the "day" variable from 0 to 40. But It breaks because of an infinite loop.

What I am doing wrong here?

Upvotes: 0

Views: 38

Answers (1)

Peter Wong
Peter Wong

Reputation: 421

With {{day++}}, it's basically trying to render day as well as updating day at the same time, which re-trigger the render, hence it's complaining about an infinite loop. If you just want to display number from 1 to 35, you can do something like: {{(weekIndex - 1) * weekdays + dayIndex}}

Upvotes: 1

Related Questions