Vue access 'on' and 'class' directives from directive

Question

I want to group multiple directives in a custom directive like the following with model:

const model = Vue.directive('model')

Vue.directive('custom', {
    bind(el, binding, vnode, oldVnode) {
        // do custom directive stuff
        // modify binding for model

        if (model.bind)
            model.bind(el, binding, vnode, oldVnode)
    },
    inserted(el, binding, vnode, oldVnode) {
        if (model.inserted)
            model.inserted(el, binding, vnode, oldVnode)
    },
    update(el, binding, vnode, oldVnode) {
        if (model.update)
            model.update(el, binding, vnode, oldVnode)
    },
    componentUpdated(el, binding, vnode, oldVnode) {
        if (model.componentUpdated)
            model.componentUpdated(el, binding, vnode, oldVnode)
    },
    unbind(el, binding, vnode, oldVnode) {
        if (model.unbind)
            model.unbind(el, binding, vnode, oldVnode)
    }
})

But unfortunately only model and show are available via Vue.directive and not on or class. As far as I can tell the other directives are getting patched in somehow and are inaccessible to me.

I'm in a webpack environment and would like to know if there is a way to access the other directives. Even if it's hacky.

Thanks

score 0 · Answer 1 · answered Dec 31 '19 at 10:31

You can access & modify the class of an element using

el.className += ' myClass'

If you just need to see the classes on it use the el.classList

To see all the options available on the element simply console.log({el}), you will get the options for on as well...

Note The space before myClass is required. As to why, do the english yourself..

Vue access 'on' and 'class' directives from directive

1 Answers1