Vue custom Directive - object properties undefined

Question

I have a custom Vue directive to show/hide an element based on a role.

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)

  }
})

This is the template and is in a v-for. They don't exist for admin users, I have

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

The issue I am having is either using displaying none or removing the child still throws the error

Cannot read property 'firstName' of undefined

I can do a check for the property in the template but is there a way just not to render it if it does not exist?

you can simply use v-if as display:none will render it and apply the css. — Stark Buttowski
– Stark Buttowski, Commented Jul 7, 2020 at 14:30
Could you please post a workable demo in codepen or sandbox, that helps to get your problem clearly? — Stark Buttowski
– Stark Buttowski, Commented Jul 7, 2020 at 14:49

IVO GELOV · Accepted Answer · 2020-07-07 15:55:06Z

1

You should simply add safeguards:

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

answered Jul 7, 2020 at 15:55

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue custom Directive - object properties undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related