I am encountering an issue with a pop-up modal that is not behaving as expected. The condition for the pop-up to appear is if the user has no transactions, which is determined by checking the length of the depositHistory array. If the length is greater than 0, the pop-up should remain hidden; if it's equal to 0, the pop-up should be shown.
However, when using a user account with 2 transactions, the pop-up still appears even though it shouldn't. Upon further investigation, the console.log() shows an empty array instead of the correct data. Interestingly, another component utilizing the same depositHistory functionality works as intended.
Component:
<template>
<div v-if='renderModal'>
<p>Fund your account</p>
</div>
</template>
<script>
const DepositGetter = namespace("deposit").Getter
const AppProps = Vue.extend({
data: () => {
return {
renderModal: false
}
},
beforeMount() {
// renders modal if user has no transactions
if (this.depositHistory.length === 0) this.renderModal = true
console.log(JSON.parse(JSON.stringify(this.depositHistory)))
// usually returns [__ob__: Observer]
// added JSON methods so now it logs []
}
export default class HomeGameBanner extends AppProps {
@DepositGetter depositHistory
}
</script>
Everything seems to be correctly implemented in the code above, but just in case here’s additional information.
Store:
type DepositGetter = GetterTree<DepositState, RootState>;
export const getters: DepositGetter = {
depositHistory: state => state.content
};
export const deposit: Module<DepositState, RootState> = {
getters
}