Blade directives (Laravel 5.6) inside the Vue.js slot element

Asked

Viewed 239 times

0

I created a Blade directive called @permissao which simply checks whether a certain value exists in the user’s session, in order to show or hide a link from the menu.

The menu I created as a component of Vue called menu-item, thus:

<template>
    <li class="sub-menu">
        <a href="javascript:;">
            <i class="fas" :class="icone"></i>
            <span>{{ titulo }}</span>
        </a>
        <ul class="sub">
            <slot></slot>
        </ul>
    </li>
</template>

There in the layout file app.blade.php, I call the component as follows:

<ul class="sidebar-menu">
    <menu-item titulo="Usuários" icone="fa-user">
        <li><a href="{{ route('usuarios.index') }}">Listar Usuários</a></li>
        <li><a href="{{ route('usuarios.permissoes') }}">Permissões</a></li>
        <li><a href="{{ route('usuarios.grupos') }}">Grupos</a></li>
    </menu-item>
    <menu-item titulo="Clientes" icone="fa-users">
        <li><a href="{{ route('clientes.index') }}">Listar Clientes</a></li>
        <li><a href="{{ route('clientes.pedidos') }}">Pedidos</a></li>
        @permissao('gerente')
            <li><a href="{{ route('clientes.importar') }}">Importar</a></li>
        @endpermissao
    </menu-item>
</ul>

That is, all the li will be compiled in the <slot></slot>. And only the user who has the permission "manager" you’ll be able to see the item "Import" menu.

The problem is that if I log into the system as a manager, I see the item Import, but if I then log in as a normal user (on another browser or computer), I keep seeing the item.

However, if I make any modifications to the file app.blade.php and go up to the server again, the menu item finally goes away.

But then, if someone logs in as manager, It also won’t see the item unless I change the file and go up again. This happens both in development and production environments.

Probably the problem has to do with caching, or something specific to Vue. I know I could implement this permission directly in the Vue component, but there is some way to solve the problem by maintaining the same structure?

  • I think you’re mixing things up, server side and front end or the screen is generated by one or the other. Must be this, anything beyond this opinion would be wrong until I put as answer.

  • Or it could be a capitalized word or a lowercase word. I’ve had problems with PHP servers with Case Sensitive settings on. I had this problem with table columns in the Database. I had written the name of my Model like this: User. On my localhost it worked, but on the web it was a problem.

  • I know you already said you think it’s not cache, but you tried php artisan cahe:clear?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.