Using Laravel to Toggle Element Visibility Based on Role in VueJS

Question

Using Laravel to Toggle Element Visibility Based on Role in VueJS

<NavLink v-if="value":href="route('accounts')" :active="route().current('accounts')"> Accounts

Here is a scenario I encountered: within my user database, there are designated roles as either User or Admin.

My current focus revolves around:

If the user role is an admin, the value will be changed to TRUE.

I am facing challenges in extracting data from the database using Vue coding techniques.

Various attempts have been made using axios and other methods. However, I believe utilizing a method that retrieves the data and allows for comparison within an if statement would be more efficient.

javascript laravel vue.js

Answer 1

Answer №1

For those utilizing laravel/breeze with inertia, accessing the current authenticated user data is possible by using usePage() or $page

If you need to access it within the <script></script> tags, you can utilize usePage()

const isAdmin = computed(() => {
    return usePage().props.auth.user.role === 'Admin'
})

Alternatively, if you require it within the template tag

<div v-if="($page.props.auth.user.role === 'Admin')"></div>

Answer 2

For those utilizing laravel/breeze with inertia, accessing the current authenticated user data is possible by using usePage() or $page

If you need to access it within the <script></script> tags, you can utilize usePage()

const isAdmin = computed(() => {
    return usePage().props.auth.user.role === 'Admin'
})

Alternatively, if you require it within the template tag

<div v-if="($page.props.auth.user.role === 'Admin')"></div>

Using Laravel to Toggle Element Visibility Based on Role in VueJS

Answer №1

Similar questions

What is the best way to utilize node exec in synchronous mode?

What is the best way to export assets into a React Native JS file?

Combining CSS and JavaScript to handle two events with a single onClick

Adjust the input values based on the child elements within the main container

The fade-in effect will initiate from the start once the mouse leaves the element (with a

Unable to store form data in a JSON file

Sending information upwards within an onClick event in a React component

Audio Playlists and Dynamic Loading with WordPress Shortcode

Showing commute time using Google Maps API v3

Handling click events for parent and child elements in Angular 5

Trouble with the width of the message container in CSS styling

Node interprets string as an object

Crafting intricate designs using AngularJS

What are the steps to ensure a form does not trigger the action URL and instead only prints the data upon submission

Nuxt encountering a critical issue: "module 'dir-glob' not found"

Vue Axios is failing to retrieve the response

Looking to retrieve data using Cheerio? If you're finding that the data appears empty in the page source but is visible when inspecting the elements, here's how you can go

Vue.js2 - Detection of Observer in Array

The Bootstrap 4.5 code is not functioning as anticipated

What could be causing the Material UI tabs to malfunction when dynamically populating the content using a .map function instead of manually inserting it?