我有一个自定义的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”
我可以检查模板中的属性,但是有没有办法不呈现它呢?
答案 0 :(得分:1)
您应该简单地添加保护措施:
<span v-role="'admin'">
{{ (user || {}).firstName }}, {{ (user || {}).lastName }}
</span>