I'm facing a strange issue and I'm completely stuck.
Here is the component in question:
<template>
<v-card elevation="0">
<h2>Accounts</h2>
<v-simple-table fixed-header height="300px">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Account ID</th>
<th class="text-left">Broker</th>
<th class="text-left">Balance</th>
</tr>
</thead>
<tbody>
<tr v-for="account in accounts" :key="account.accountId">
<td>{{ account.accountId }}</td>
<td>{{ account.broker }}</td>
<td>{{ accountBalances[account.accountId] }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</template>
<script>
import { DB } from "../../firebase/db";
export default {
name: "Accounts",
data() {
return {
cashTransactions: [],
accounts: [],
newAccount: []
};
},
computed: {
accountBalances() {
try {
let balances = {};
this.accounts.forEach(account => {
let accBal = 0;
const transactions = this.cashTransactions.filter(acc => {
return acc.accountId === account.accountId;
});
transactions.forEach(transaction => {
accBal += Number(transaction.amount);
});
balances[account.accountId] = accBal;
});
return balances;
} catch (err) {
console.error(err);
return err;
}
}
},
firestore: {
cashTransactions: DB.collection("cashTransactions"),
accounts: DB.collection("accounts")
}
};
</script>
<style scoped></style>
And here are the Firestore collections I'm working with:
https://i.sstatic.net/hhJdz.png
What's puzzling me is the behavior of the Firestore when defined inside my components. If I set it up like this:
firestore: {
cashTransactions: DB.collection("cashTransactions"),
accounts: DB.collection("accounts")
}
Only the 'accounts' property seems to be reactive, meaning that adding documents to the collection reflects in real-time updates. However, setting it up as follows:
data() {
return {
accounts: [],
cashTransactions: [],
newAccount: []
};
},
firestore: {
accounts: DB.collection("accounts"),
cashTransactions: DB.collection("accounts")
}
Still leads to only the 'accounts' being reactive. Even switching the order doesn't change the reactivity:
data() {
return {
accounts: [],
cashTransactions: [],
newAccount: []
};
},
firestore: {
accounts: DB.collection("cashTransactions"),
cashTransactions: DB.collection("accounts")
}
Despite my attempts, the 'cashTransactions' property remains non-reactive and only gets updated on page refresh. Any insights on what could be causing this?
Thank you!