Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

can not access parentElement within custom directive's bind function

See original GitHub issue

I have following simple code:

define a test-comp component; define a custom directive log-something within that component’s template, i use a custom directive v-log-something; within the diretive’s bind function**, i want to log out the belonging element’s parentElement; Unfortunately, the null result is returned.** Note: It works if I put the v-log-something diretive in a normal html tag( Not within the component’s template). I am not sure whether or not this is a bug. I guess it is caused by some lifecycle issue: When diretive’s bind function is called, the belonging component has not been inserted into dom. When can we make sure everything is in dom and we can access parentElement node within the directive’s bind function safely?? here is the fiddle: http://jsbin.com/wajarad/edit?html,js,console,output

<body id="body">
  <test-comp></test-comp>
</body>
Vue.component('test-comp',{
  template: '<div v-log-something>this comes from test-comp</div>'
});
Vue.directive('log-something',function(){
  console.log(this.el.parentElement);
});
new Vue({
  el: '#body'
});

Issue Analytics

State:
Created 7 years ago
Comments:12 (3 by maintainers)

Top GitHub Comments

8reactions

vladyc9commented, May 27, 2019

I faced this issue in Vue 2.5.13. Here is workaround works for me:

bind(el, binding, vnode) {
    vnode.context.$nextTick(() => {
        // vnode.elm.parentElement
    });
}

1reaction

simplesmilercommented, Feb 23, 2017

@nat1597 in Vue 2 directives changed a lot. Hook signatures are now different and no more this.

You can access the vm as vnode.context, with vnode being the third argument to the hook. And the old workaround with nextTick is still needed if you want to access vm from the directive’s bind.