williamcruzme / vue-gates

đź”’ A Vue.js & Nuxt.js plugin that allows you to use roles and permissions in your components or DOM elements, also compatible as middleware and methods.
https://williamcruzme.github.io/vue-gates/
MIT License
264 stars 31 forks source link

Feature requested - Directive like v-if #22

Closed wit3 closed 4 years ago

wit3 commented 4 years ago

Hi, it's an awesome package, congratz. Can you implemented a way to use directive like v-role in the same way of vue v-if. Let me explain, the v-if don't render the element in DOM if the condition is false. The directive implemented now like v-role or similar, renderer the element and process the condition for removing that.

Any ideas for making this goal?

EDIT:

Searching on SO i've found this hack for reaching the goal:

/**
 * Create comment node
 *
 * @private
 * @author https://stackoverflow.com/questions/43003976/a-custom-directive-similar-to-v-if-in-vuejs#43543814
 */
function commentNode(el, vnode) {
  const comment = document.createComment(' ')

  Object.defineProperty(comment, 'setAttribute', {
    value: () => undefined
  })

  vnode.text = ' '
  vnode.elm = comment
  vnode.isComment = true
  vnode.context = undefined
  vnode.tag = undefined
  vnode.data.directives = undefined

  if (vnode.componentInstance) {
    vnode.componentInstance.$el = comment
  }

  if (el.parentNode) {
    el.parentNode.replaceChild(comment, el)
  }
}

Thanks