Vue.js: Conditional rendering based on computed property - laravel

Question

I am trying to conditionally render element(s) based on a computed property but not having much luck even though my computed property is returning true or false correctly.
I am passing the user object in as a property (from Laravel) and all is working fine. I am able to see the user -- and their related role(s).
I've tested via Laravel to make sure I am sending the correct user and the relationship and everything looks good there as well.
Controller
$user = User::with('roles')->find(Auth::id());
blade
<my-component :user="{{ $user }}"></my-component>
VueComponent.vue
<template>
<div>
<div v-if="admin">
<p>You are an admin!</p>
</div>
<div v-else>
<p>You are not an admin.</p>
</div>
</div>
</template>
<script>
export default {
...
computed: {
admin: function () {
this.user.roles.forEach((role) => {
console.log('role: ', role); // role: admin (string)
if (role.name === 'admin') {
console.log('user is an admin!'); // I am getting here.
return true;
} else {
console.log('user is NOT an admin.');
}
});
return false;
},
},
methods: {
//
},
props: {
user: {
type: Object,
required: true,
},
},
}
</script>
I'm sure I am not implementing the computed property correctly; any help is greatly appreciated!

Answer 1

You problem is using foreach in wrong way! please use this instead:
computed: {
admin: function () {
for (var i = 0; i < this.user.roles.length; i++){
if ( this.user.roles[i].name === 'admin') {
return true;
}
}
return false;
}
}
you can read this article about forEach in js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Your mistake was return true from forEach callback function and leave this true value useless and then return false value on admin function.