Wie legen Sie eine Eigenschaft auf eine benutzerdefinierte Anweisung in Vue.js fest?

Question

Gibt es eine Möglichkeit, eine Eigenschaft auf eine Direktive zu beschränken? So etwas kann ich Fundament hinzufügen und es aufräumen (Entfernen von Ereignislistenern usw.), wenn das Element nicht gebunden ist?

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

Answer 1

Sie müssen vnode.context verwenden, die Sie auf der Vue-Instanz auf die Daten Eigenschaften zugreifen geben:

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

Hier ist ein JSFiddle den grundlegenden Prozess zeigen: https://jsfiddle.net/dv5n39ta/

Answer 2

ok so dass diese erreicht, was ich wollte. Wenn Sie dem Element die Eigenschaft zuweisen, wird der Job ausgeführt.

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