ネストされたループと予期しない結果

Question

私は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テーブルを取得することです。各セルでは、0から40までの変数 "day"が表示されます。しかし、無限ループのためにブレークします。

私はここで間違っていますか？ {{day++}}で

Answer 1

が、基本的に、したがって、それは無限ループ不満だ、レンダリング・トリガーを再同時に、でdayを更新するだけでなく、dayをレンダリングしようとしています。 1から35までの数字を表示したい場合は、次のようにすることができます。 {{(weekIndex - 1) * weekdays + dayIndex}}