[Vuejs]-Cannot add/remove/toggle element class inside Vue directive?

by

0👍

So I tried this from another angle and also made the ‘hide-name’ attribute a directive as well, then on click I emitted the ‘uniqueID’ which ‘hide-name’ directive picked up.

I’m still not sure why Vue is not visually updating the browser but I’m guessing it must have something to do with the ‘virtual-dom’.

demo: https://jsfiddle.net/hLga2jxq/3/

Vue.directive('hide-for', {
    bind(el, b, vnode) {
        el.addEventListener('click', (event) => vnode.context.$emit(b.value, event) );
    }
});

Vue.directive('hide-name', {
    bind(el, b, vnode, oldVnode) {
        vnode.context.$on(b.value, function(){
            let hasHideClassAttr = el.getAttribute('hide-class');
            if(hasHideClassAttr) hasHideClassAttr.split(' ').forEach((c) => el.classList.toggle(c) );
            else el.classList.toggle('hide');
        });
    }
});
👤Jammer

Leave a comment