Nuxtjs 指令无法在 v-btn 上运行 v-can

Question

我像这样创建了一个插件permission.js。

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;
  });
}

点赞加载插件

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

然后像这样使用

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

无法正常工作。这里有什么问题吗？

Answer 1

将您的 permission.js 更改为这样 code.it 正常工作。

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);
      }
    }
  });
}

Nuxtjs 指令无法在 v-btn 上运行 v-can

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

plugins

vue.js

nuxt.js