Accessing User data in Breeze/vue page

I'm using Breeze/Vue with inertia and trying to add a conditional menu item in the AuthenticatedLayout.vue

I'd like to use a div with v-if to display the menu item if the user.user_type == 'Admin', but I can not get it to see the user.user_type.

I tried following the instructions for accessing shared data as explained in https://inertiajs.com/shared-data#sharing-data, but I keep getting an error: Cannot read properties of undefined (reading 'user').

I tried the line from the instructions: const user = computed(() => usePage().props.auth.user.user_type);

Using the DevTools, I can see the data is there, but it's not in props, it's listed under attrs>auth>user and I can't seem to access it.

How can I create a conditional menu item based on the user.user_type?

AungHtetPaing__

3 years ago

Best Answer

Level 22

@max100 can you show how did you write the code? Basically you just need to share data from HandleInertiaRequests and access it from every page with $page.props.

Max100

3 years ago

Level 6

@AungHtetPaing__ Using the info in your answer, I was able to get this sorted out. The problem was how I wrote the v-if.

In case anyone else winds up struggling with this, here's how it worked:

<NavLink v-if=" $page.props.auth.user.user_type == 'Admin' " :href="route('adminmenu')" :active="route().current('adminmenu')">
Admin
</NavLink>

Thanks again for your help!

Please or to participate in this conversation.