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

Question

我有一个自定义 Vue 指令 show/hide 基于角色的元素。

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>

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

无法读取未定义的属性'firstName'

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

Answer 1

您应该简单地添加安全措施：

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

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

Vue custom Directive - object properties undefined

vue.js

vuejs2

vue-component

directive