Level 75
Apr 24, 2025
7
Level 1
Show row number of tab in a tab
Hi there,
I use Inertia with Vue.
Here is the data input I have :
[
{
id: 20,
name: "John Doe",
books: [
{
id: 158,
title: "The Great Gatsby",
},
]
},
{
id: 32,
name: "Jane Smith",
books: [
{
id: 12,
title: "To Kill a Mockingbird",
},
{
id: 45,
title: "1984",
}
]
},
{
id: 13,
name: "Alice Johnson",
books: [
{
id: 78,
title: "Pride and Prejudice",
}
]
}
]
Here is the output I would like :
| N | Title | User |
|---|-----------------------|---------------|
| 1 | The Great Gatsby | John Doe |
| 2 | To Kill a Mockingbird | Jane Smith |
| 3 | 1984 | Jane Smith |
| 4 | Pride and Prejudice | Alice Johnson |
Here is the vue page I wrote but I have no idea how to deal with the counter at the first column :
<script setup>
defineProps({
mydata: {
type: Array,
default: () => [],
},
});
</script>
<template>
<div class="table">
<div class="table-row">
<div class="table-cell">N</div>
<div class="table-cell">Title</div>
<div class="table-cell">User</div>
</div>
<template v-for="user in mydata" :key="user.id">
<div class="table-row" v-for="book in user.books" :key="book.id">
<div class="table-cell">{{ A COUNTER OF ROW HERE }}</div>
<div class="table-cell">{{ book.title }}</div>
<div class="table-cell">{{ user.name }}</div>
</div>
</template>
</div>
</template>
I tried the script code below and called getcount() in the cell but I got the error Maximum recursive updates exceeded in component <MyComponent>
const count = ref(0);
const getCount = () => ++count.value;
Thanks for your advices !
Level 1
I thank you @jlrdw for your reply !
That is an idea but unfortunately I don't think it can be applied to my case. A user can have an unknown amount of books and therefore for each book we would have to reverse to all the users before the current one to check how many books they have. It seems like an overload of computation, don't you think ? Or I missed something maybe...
Level 75
Try something like this, may need to tweak some.
<template v-for="user in mydata" :key="user.id">
<div class="table-row" v-for="(book in user.books, index)" :key="book.id">
<div class="table-cell">{{ index + 1 }}</div>
<div class="table-cell">{{ book.title }}</div>
<div class="table-cell">{{ user.name }}</div>
</div>
</template>
It seems you want to start a new count per user, unless I'm reading it wrong.
Level 1
Thanks @jlrdw for your reply !
I suppose you mean
<div class="table-row" v-for="(book, index) in user.books" :key="book.id">
(index was declared at the wrong place) and it gives this result which is not what I expected
| N | Title | User |
|---|-----------------------|---------------|
| 1 | The Great Gatsby | John Doe |
| 1 | To Kill a Mockingbird | Jane Smith |
| 2 | 1984 | Jane Smith |
| 1 | Pride and Prejudice | Alice Johnson |
Level 18
Hello,
Here are my 2 cents to this...
<template v-for="user in mydata" :key="user.id">
<div class="table-row" v-for="book in user.books" :key="book.id">
<div class="table-cell">{{ counterMethod()}} </div> <!-- {{ A COUNTER OF ROW HERE }} -->
<div class="table-cell">{{ book.title }}</div>
<div class="table-cell">{{ user.name }}</div>
</div>
</template>
<script>
methods:{
counterMethod(){
return this.bookCounter++;
}
},
data(
return{
bookCounter:0,
});
</script>
I think this should do it.
Hope it helps eitherway.
Best regards,
Mega Aleksandar
Level 1
Hi @Mega_Aleksandar , thanks for your reply
As mentioned at the end of my post this solution is what I already tried . In Composition API it is done this way
<script setup>
import { ref } from "vue";
defineProps({
mydata: {
type: Array,
default: () => [],
},
});
const bookCounter = ref(0);
const counterMethod = () => ++bookCounter.value;
</script>
And I get an error with a weired result
| N | Title | User |
|-----|-----------------------|---------------|
| 405 | The Great Gatsby | John Doe |
| 406 | To Kill a Mockingbird | Jane Smith |
| 407 | 1984 | Jane Smith |
| 408 | Pride and Prejudice | Alice Johnson |
Uncaught (in promise) Maximum recursive updates exceeded in component <Books>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
Level 1
Finally I decided to use a computed const with a flatMap to avoid the two nested loops. This way I can use the index of the resulted list.
<script setup>
import { computed } from "vue";
const props = defineProps({
mydata: {
type: Array,
default: () => [],
},
});
const flatdata = computed(() =>
props.mydata.flatMap((user) =>
user.books.map((book) => ({
title: book.title,
name: user.name,
}))
)
);
</script>
<template>
<div class="table">
<div class="table-row">
<div class="table-cell w-10">N</div>
<div class="table-cell w-10">Title</div>
<div class="table-cell w-10">User</div>
</div>
<div class="table-row" v-for="(book, index) in flatdata" :key="book.id">
<div class="table-cell">{{ index + 1 }}</div>
<div class="table-cell">{{ book.title }}</div>
<div class="table-cell">{{ book.name }}</div>
</div>
</div>
</template>
Let me know if you have better...
Please or to participate in this conversation.