Mar 7, 2022
0
Level 1
v-if function returning nothing, but it should
Hello all! Running into an issue that's been bugging me for the past 2 hours.
I've got a function in a mixin like so:
checkPermissionMeetings(type,areaID){
if(this.$store.state.global.permissions.meetings===true) { //If user has basic meeting access
if(type==='write'){
Object.entries(this.$store.state.global.permissions.meeting_areas).forEach(([key, val]) => {
if (parseInt(key) === parseInt(areaID) && (val === 'write')) {
console.log('write_true')
return true;
}
});
}
if(type==='read'){
Object.entries(this.$store.state.global.permissions.meeting_areas).forEach(([key, val]) => {
if (parseInt(key) === parseInt(areaID) && (val === 'read' || val === 'write')) {
console.log('read_true')
return true;
}
});
}
}
},
I am calling it in a view component which renders a navigation bar:
<span v-for="area in area_meetings">
{{area.id}} {{$store.state.global.permissions.meeting_areas[area.id]}} //This is here so I can see that I am sending the correct values to the function
{{checkPermissionMeetings('read', area.id)}} //This is here so I can see the output, but it returns nothing
<router-link tag="v-list-item" link :to="'/meetings/'+area.id" class="ml-5" v-if="checkPermissionMeetings('read', area.id)">
<v-list-item-icon>
<v-icon>mdi-chair-rolling</v-icon>
</v-list-item-icon>
<v-list-item-title>{{area.name}}</v-list-item-title>
</router-link>
</span>
I've console logged the outputs as you can see in the code, and they are looking ok. I have also put the function in curly braces so I can see the return, but this returns nothing at all.

I can see them in my store

I'm even echoing them out on the render and the values match...

Is there something fundamental I'm missing here?
Please or to participate in this conversation.