I am attempting to display all documents from a Firestore collection in a table using refs, but I am unsure about accessing each field for template ref.
getDocs(collection(db, "usr"))
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.data())
});
})
Is there a way to access the doc.data() from template ref similar to this?
const employees = ref([
{
name: 'John Doe',
title: 'IT Technician',
department: 'IT Department',
employment: 'Probation',
status: 'Terminated',
joined: '16 Jul 2021',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9df7f2f5f3b3f9f2f8ddf8e5fcf0edf1f8b3fef2f0">[email protected]</a>',
},
{
name: 'Jane Doe',
title: 'Marketing',
department: 'Marketing Department',
employment: 'Permanent',
status: 'Active',
joined: '16 Jul 2021',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aaa1aea5eea4afa580a5b8a1adb0aca5eea3afad">[email protected]</a>',
},
<tr v-for="employee in employees" :key="employee.email">
<td >
<div>
<div>
{{ employee.name }}
</div>
<div>
{{ employee.email }}
</div>
</div>
</td>
<td>
<div>{{ employee.title }}</div>
<div>{{ employee.department }}</div>
</td>
<td>
<span> {{employee.status}} </span>
</td>
<td>
{{ employee.joined }}
</td>
<td>
{{ employee.employment }}
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
I am facing difficulty in accessing the doc.data() outside of the function or promise. I am utilizing script setup.