My goal is to display a table of data fetched from Firebase Firestore. I have successfully stored all the data in an array, but when I try to display it, the entire array appears instead of individual items. You can see the issue in the image below:
Here's the code snippet causing the problem:
<template>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in result" v-bind:key="index">
<td>{{ result }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
import firebase from 'firebase'
import {db} from '../service/firebase'
export default {
data () {
return {
userName: null,
result: [],
name: null,
email: null,
userMail: null,
telefone: null,
userPhone: null,
userAccept: null,
}
},
async created() {
var userData = []
await db.collection("users").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
userData.push(doc.data())
});
});
this.result = userData.map(a => a.name)
console.log(result)
}
}
I'm looking for help on how to display single items from the array in the table, rather than the entire array at once. Any suggestions would be greatly appreciated. Thank you!