[Vuejs]-How to scope a property to a custom directive in Vue.js?

by

2👍

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();
  },
});
👤user1280853

0👍

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/

👤craig_h

Leave a comment