Retrieve data's component from custom directive

Question

So I want to bind style using a directive since I need to test a value send to the element.

<div v-portrait="photo.portrait"></div>

The thing is I need to access a data() of my component but I don't get how since this is out of scope.

directives: {
    portrait: {
        bind: function (el, binding) {
            if(binding.value == true){
                console.log(this); //undefined
                el.height = (this.rowHeight)+ 'px';
            }
        }
    }
}

So how could I retrieve this.rowHeight?

Answer 1

bind has a 3rd argument, it's vnode. You can access Vue instance through this paramteter

bind: function (el, binding, vnode) {
  if(binding.value == true){
    console.log(this); //undefined
    el.height = (vnode.context.rowHeight)+ 'px';
  }            
 }

Reference