CODEWITHSUNDEEP
vue.jspluginsnuxt.js
Stack Team
Stack Team

Reputation: 23

Nuxtjs directive can can't working v-can on v-btn

I create a plugin permission.js like this.

import Vue from "vue";
export default function({ store }) {
  Vue.directive("can", function(el, binding) {
    console.log(store.state.permissions.indexOf(binding.value) !== -1);  _//true_
    return store.state.permissions.indexOf(binding.value) !== -1;
  });
}

Load the plugin Like

plugins: [{ src: "~/plugins/permission", ssr: true }],

And use like this

<button v-can="'add-customer'">You can edit this thing</button>

It doesn't work properly. what wrong here ?

Upvotes: 2

Views: 511

Answers (1)

Jamil Ahmed
Jamil Ahmed

Reputation: 346

Change your permission.js to look like this code.it works properly.

import Vue from "vue";
export default function({ store }) {
  Vue.directive("can", function(el, binding, vnode) {
    if (store.state.permissions.indexOf(binding.value) === -1)
    {
      const comment = document.createComment(" ");
      Object.defineProperty(comment, "setAttribute", {
        value: () => undefined
      });
      vnode.elm = comment;
      vnode.text = " ";
      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);
      }
    }
  });
}

Upvotes: 1

Related Questions