Why I am getting wrong data when I called a incremental method in v-for in vue3 app? - vue.js

Question

I am getting wrong data when I called a incremental method in vue3 in v-for loop.
My code is given below, here I could have used index+100 but I need like this, this is the sample version of my original code. A screenshot is given after the code, see the console log the counter is more then I expected, also index started with 605 but it should 100
<template>
<table border="1" style="border-collapse: collapse">
<thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
<tr :key="index" v-for="(rowitem,index) in table_data.items">
<td>{{getRowIndex()}}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'App',
data() {
return {
start_row_ind: 100,
table_data: {
items: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
]
}
}
},
methods: {
getRowIndex(){
console.log(this.start_row_ind);
return this.start_row_ind++;
}
}
}
</script>
Output screenshot is
Please advice me how can I fix this issue, I have to use this method getRowIndex

Answer 1

Try without method, just add index in template, or you can pass index to your method:
new Vue({
el: "#demo",
data() {
return {
start_row_ind: 100,
table_data: {
items: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
],
},
items2: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
]
}
},
methods: {
getRowIndex(i){
return this.start_row_ind + i;
},
addRows() {
this.table_data.items.push(...this.items2)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table border="1" style="border-collapse: collapse">
<button #click="addRows">add rows</button>
<thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
<tr :key="index" v-for="(rowitem,index) in table_data.items">
<td>{{ getRowIndex(index) }}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
</tr>
</tbody>
</table>
</div>