import styled from "vue-styled-components";
const props = { type: String, action: Boolean };
const getter = () => {
const permissionsList = JSON.parse(localStorage.getItem("UZ")).permissions;
const type = props.type;
const action = props.action;
return permissionsList.type.action;
};
export const stylePermission = styled("span")`
pointer-events: ${getter() ? "" : "none"};
cursor: ${getter() ? "pointer" : "not-allowed"};
opacity: ${getter() ? 1 : 0.4};
`;
This code snippet is being utilized in the following manner:
<template slot="tab-head-roles">
<sp-permission type="user" action="can_approve">
<router-link to="/settings/roles">Roles</router-link>
</sp-permission>
</template>
An issue arises when trying to access
return permissionsList.type.action;type and action do not directly exist in the JSON Object, even though their values are present within the object.
How can I best approach accessing this information?