vue.js - 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>

它不能正常工作。这里有什么问题？

标签： vue.jspluginsnuxt.js

Answer 1

更改您的 permission.js 使其看起来像此代码。它可以正常工作。

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