How to scope a property to a custom directive in Vue.js?

Question

is there a way to scope a property to a directive? Something like this so I can add foundation to it and clear it up (removing event listeners etc.) when the element is unbound?

Vue.directive('toggler', {
  inserted(el) {
    this.toggler = new Foundation.Toggler($(el)); 
  },
  unbind() {
    this.toggler.destroy();
  },
});

Answer 1

ok so this achieves what I wanted. Assigning the property to the element does the job.

Vue.directive('f-toggler', {
  inserted(el) {
    /* eslint-disable no-param-reassign */
    el.fToggler = new Foundation.Toggler($(el));
  },
  unbind(el) {
    el.fToggler.destroy();
  },
});

Answer 2

You need to use vnode.context which will give you access to the data properties on the Vue instance:

Vue.directive('toggler', {
  inserted(el, binding, vnode) {
    vnode.context.toggler = new Foundation.Toggler($(el)); 
  },
  unbind(el, binding, vnode) {
   vnode.context.toggler.destroy();
  },
});

Here's a JSFiddle to show the basic process: https://jsfiddle.net/dv5n39ta/