Using v-for for fixed numbers and not objects - vue.js

Question

I'm trying to render a simple table with 20 rows and 5 columns with v-for but I'm having problems. My code:
<tr v-for="row in totalRows" :key="row">
<td v-for="col in totalColumns" :key="col">
{{ getTableNum() }}
</td>
</tr>
In data:
totalColumns: 5,
totalRows: 20,
numberCount: 0,
Method:
getTableNum() {
return ++this.numberCount;
},
It is throwing a warning...
[Vue warn]: You may have an infinite update loop in a component render function.
... and rendering like 20k rows.
I can't find an example on how use v-for for fixed numbers(only using objects) anywhere.
I imagine that those loops above would reproduce a result like:
for (let row = 0; row < totalRows; row++) {
for (let col = 0; col < totalCols; col++) {
getTableNum();
}
}
But I'm wrong for some reason.
UPDATE: Ended up using no variables at all:
<tr v-for="row in 20" :key="row">
<td v-for="col in 5" :key="col">
{{ col + (row - 1) * 5 }}
</td>
</tr>
I wish official docs could have examples like that. If I knew that fixed numbers could be used in the for loop it would spare me some time.

Answer 1

Running methods inside the template leads to some infinite rendering loops since the variable is also used in template, to avoid this create a two-dimensional array as a computed property and then render it :
computed:{
arr(){
let n=0;
return [...Array(20)].map((_,i)=>[...Array(5)].map((_,j)=>{
++n;
return n;
}))
}
}
in template :
<tr v-for="(row,i) in arr" :key="i">
<td v-for="col in row" :key="col">
{{ col }}
</td>
</tr>

Answer 2

The getTableNum function execution changes the numberCount in data and it triggers Vue to re-render the template, which causes the function execution, and so on.
In this case, you should try to avoid altering the numberCount value.
If I didn't get you wrong, you wish to have 1-2-3-4-5 in the first row, 6-7-8-9-10 in the second, and so on.
If so, you can try to rewrite your function as such:
getTableNum(row, col) {
// row and col are 1-based
return 1 + ((row - 1) * this.totalColumns) + (col - 1);
},

Answer 3

You are changing numberCount (which is a reactive data property) directly in the template. That triggers a re-render (and thus an infinite loop). You can simply do this :
var app = new Vue({
el: '#app',
data: {
totalColumns: 5,
totalRows: 20
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table border=1>
<tr v-for="(row, rowIndex) in totalRows" :key="row">
<td v-for="(col, columnIndex) in totalColumns" :key="col">
{{ rowIndex * totalColumns + col}}
</td>
</tr>
</table>
</div>

Answer 4

Another alternative ONLY for static tables (where the table content is not modified after initial rendering) is the use of v-once directive. Each table row will be rendered only once, and every subsequent call to getTableNum function will not trigger the rerendering of previous rows:
var app = new Vue({
el: '#app',
data: {
totalColumns: 5,
totalRows: 20,
numberCount: 0
},
methods: {
getTableNum() {
return ++this.numberCount
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table border=1>
<tr v-once v-for="(row, rowIndex) in totalRows" :key="row">
<td v-for="(col, columnIndex) in totalColumns" :key="col">
{{ getTableNum() }}
</td>
</tr>
</table>
</div>