Vue 自定义指令 - 对象属性未定义

Posted 2023-02-23

【中文标题】Vue 自定义指令 - 对象属性未定义

【英文标题】：Vue custom Directive - object properties undefined

【发布时间】：2020-10-27 19:22:27

【问题描述】：

我有一个自定义 Vue 指令来显示/隐藏基于角色的元素。

Vue.directive('role', (el, binding, vnode ) => 
  const modifiers = binding.modifiers
  const roles = vnode.context.$store.state.roles;

  if (!roles.includes(binding.value) ||  (roles.includes(binding.value) && modifiers.not)) 
    el.style.display = 'none';
    vnode.elm.parentElement.removeChild(vnode.elm)

  
)

这是模板，位于 v-for 中。它们不存在于管理员用户，我有

  <span
    v-role="'admin'"
  >
      user.firstName ,  user.lastName  
  </span>

我遇到的问题是使用不显示或删除孩子仍然会引发错误

无法读取未定义的属性“firstName”

我可以检查模板中的属性，但是如果它不存在，有没有办法不渲染它？

【问题讨论】：

您可以简单地使用 v-if 作为 display:none 将呈现它并应用 css。

我不想使用 v-if

能否请您在 codepen 或沙箱中发布一个可行的演示，以帮助您清楚地解决您的问题？

【参考方案1】：

您应该简单地添加保护措施：

  <span v-role="'admin'">
      (user || ).firstName ,  (user || ).lastName  
  </span>