I have various variables in my vuex-store, such as loggedIn. I need to access this variable from the computed section of my component to filter an array based on its value.
Here is how I am trying to implement it in my code:
<td v-for="(item, index) in navLinks" :item="navLink" :key="index">
<router-link :to="{ name: item.name }" class="router-links" exact>{{ item.text }}</router-link>
</td>
And this snippet shows the relevant part of my script section:
computed: {
...mapGetters(['user', 'loggedIn']),
navLinks: [
{
vif: !this.loggedIn,
name: 'Register',
text: 'Registrieren',
},
{
vif: this.loggedIn,
name: 'Logout',
text: 'Logout',
},
],
},
However, I keep encountering the error:
Uncaught TypeError: Cannot read property 'loggedIn' of undefined
This makes me assume that Vuex getters cannot be used before a component mounts due to this not being defined..?
If I were to use navLinks in the data with v-if-directives, I would receive an error because v-if bindings are incompatible with v-for bindings.
So, how can I resolve this issue?