article6.vue

<script>
  export default {
    name: 'permission-control',
    props: ['permission-name'],
    render() {
      // EDITABLE case. Don't change anything and just render control as is.
      if (userHasPermission(this.permissionName, EDITABLE)) {
        return this.$slots.default[0];
      }

      // If user has no EDITABLE permission, but he has 'VISIBLE',
      // let's change "disabled" prop value to the true
      if (userHasPermission(this.permissionName, VISIBLE)) {
        this.$slots.default[0].componentOptions.propsData.disabled = true;
        return this.$slots.default[0];
      }

      // User has permission for nothing! Let's don't show him anything!
      return null;
    }
  }
</script>