Display data to every <td> from Firestore using Nuxt - google-cloud-firestore

Question

how do I want to display those particular values into those particular td tag from a document in Firestore using Nuxt?
I already looking into some of the StackOverflow QnA but have not quite found the answer that I wanted.
Here is the image of the table:
The table
So as you can see I manage to get the document into my app, but I want the data to be on that right column. How I can achieve this?
my HTML part:
<template>
<div id="SubPackageDetailTable">
<h2>Sub-Packages Detail</h2>
<table
items="SubPackagesDetails">
<tr>
<th>Subcontractor</th>
<td>{{ SubPackagesDetails.SubContractorName }}</td>
</tr>
<tr>
<th>WPC</th>
<td>{{ SubPackagesDetails.WorkPackageContractorName }}</td>
</tr>
<tr>
<th>Package</th>
<td>{{ SubPackagesDetails.Package }}</td>
</tr>
<tr>
<th>Sub-Package</th>
<td>{{ SubPackagesDetails.Subwork }}</td>
</tr>
<tr>
<th>Code</th>
<td>{{ SubPackagesDetails.code }}</td>
</tr>
<tr>
<th>Commencement Date</th>
<td>{{ SubPackagesDetails.CommencementDate }}</td>
</tr>
{{ SubPackagesDetails }}
</table>
</div>
</template>
my Script part:
<script>
import firestore from "#/plugins/firebasetest";
export default {
data: () => ({
SubPackagesDetails: [
{
SubContractorName: '',
WorkPackageContractorName: '',
Package: '',
Subwork: '',
code: '',
CommencementDate: '',
}
],
}),
created() {
this.refreshSubPackagesDetails();
},
methods: {
refreshSubPackagesDetails() {
this.SubPackagesDetails = [];
firestore
.collection("subsub")
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
this.SubPackagesDetails.push({ ...doc.data(), id: doc.id });
this.loading = false;
});
console.log(this.SubPackagesDetails);
});
},
},
}
</script>

Answer 1

Thanks to #kissu, using v-for solved the problem. Not sure how to explain how it can work but here is how I do it. I'll put as answer in case if someone had a problem same as me.
<table>
<tr v-for="(subcontractorname, i) in SubPackagesDetails" :key="i">
<th>Subcontractor</th>
<td
>{{ subcontractorname.SubContractorName }}</td>
</tr>
<tr v-for="(workpackagecontractorname, i) in SubPackagesDetails" :key="i">
<th>WPC</th>
<td>{{ workpackagecontractorname.WorkPackageContractorName }}</td>
</tr>
<tr v-for="(packages, i) in SubPackagesDetails" :key="i">
<th>Package</th>
<td>{{ packages.Package }}</td>
</tr>
<tr v-for="(subwork, i) in SubPackagesDetails" :key="i">
<th>Sub-Package</th>
<td>{{ subwork.Subwork }}</td>
</tr>
<tr v-for="(Code, i) in SubPackagesDetails" :key="i">
<th>Code</th>
<td>{{ Code.code }}</td>
</tr>
<tr v-for="(commencementdate, i) in SubPackagesDetails" :key="i">
<th>Commencement Date</th>
<td>{{ commencementdate.CommencementDate }}</td>
</tr>
</table>