Level 63
v-show="$can('user_create') && $can('role_create')"
Nov 30, 2022
10
Level 1
Can`t add multiple permission on vue component
I have a system builded with laravel7.X and vue js2. Also i have declared some permission for each users. So i have builded a button as reusable component and i call this button on top of each table, basically is a button with create method, (it mean `create user, or create role, ...) but now i want to add permission for each button if user can create new users or new roles.
this is vue js button
<v-button v-show="$can('user_create'), $can('role_create')" type="success" v-if="addRecordModal" @click.prevent="showModal" class="add-record">
Add Record
</v-button>
i fetch this button on other component, for example on users table and roles table
<btn-custom-action role="add-user-module"
@showModal="showModal"
:addRecordModal="addRecordModal"
></btn-custom-action>
Like this v-show="$can('user_create'), $can('role_create')" it is not working as well as i need couse if a user have at last one role of these it will show button for both components but i want to show button only in component where user can have permission to add records.
Level 1
@vincent15000 This needs both conditions to show the button. What I want is to display the button only in the table user_create or role_create if the user has one of these and display it in the corresponding table
1 like
Level 63
Level 1
@vincent15000 I have tried but this. But let's say that if the user has the right to create roles (role_create), and we have given this type of condition to the button, the button will also appear in the table of users even though he does not have the right to create users (user_create).
1 like
Level 63
@tilamap365 If you really need to distinguish both rights, you need to have two buttons.
Level 1
@vincent15000 But I was wondering if we have any possibility in vue js how to detect the button, because I didn't know something like that. Anyway i can do something like this for each template and does not need to add permission to button couse will be decide from parent
<btn-custom-action v-if="$can('user_create')" role="add-user-module"
I am just looking for best solution
1 like
Level 63
@tilamap365 Now you're talking about to detect the button. Can you explain ? I'm really confused because it's not clear for me.
Level 1
@vincent15000 So ihave a button called Add Record witch i use on some component . Button is used to show a modal for creating records on each table, like usres or maybe roles or anything else. Like reusable button. But i also have some permission for example a user can create roles but not create users, and there is a problem couse i call this button from /components/module/button.js and use this button on each table i want to create records with different modal input of course. The problem is how can i set permission to this button, so button should not be displayed on users table couse is not allowed to create user by permission buy will be displayed on roles table couse permission allow this button to create roles. Hope i was clear, it a bit complicated and i dont know how to explain very exactly
1 like
Level 63
@tilamap365 Ok now I understand, it's a reusable button.
Inside the button component, you need to have a show property and use it to show / hide the button.
// Inside your customButtonComponent
<button v-show = "show">My super button</button>
And you assign true or false to this property from the parent component.
<custom-button-component :show="$can('do_anything')"></custom-button-component>
...
<custom-button-component :show="$can('do_something_else')"></custom-button-component>
Level 1
@vincent15000 Now this works perfectly. Thank you
1 like
Please or to participate in this conversation.