javascript - 无法在 Vue 指令中添加/删除/切换元素类？

Question

这有效:https://jsfiddle.net/hxyv40ra

但是，当我将此代码放入 vue 指令中时，按钮事件被触发，并且控制台显示该类已被删除但视觉上没有任何变化？

这是一个示例:https://jsfiddle.net/hLga2jxq

指令代码也在下面(以安抚 stackoverflow 的规则)。

样式

.hide {
  display: none;
}

html

<div id="app">
  <button v-hide-for="'uniqueID'">toggle to show?</button>
  <div class="hide" hide-name="uniqueID">
    Hello! :D
  </div>
</div>

js

Vue.directive('hide-for', {
    bind(button, b, vnode, oldVnode) {
        console.log(b);
        var elsToToggle = document.querySelectorAll(`[hide-name="${b.value}"]`);
        console.log(button, b.value, `[hide-name="${b.value}"]`, elsToToggle);

        button.addEventListener('click', (b) => {
            console.log(button, " clicked");
            elsToToggle.forEach((el) => {
                console.log(el);
                el.classList.toggle('hide');
            })
        }, false)
    }
});

var app = new Vue({
  name: "test",
  el: '#app',
  data: {}
})

Answer 1

因此，我从另一个 Angular 进行了尝试，并将“hide-name”属性也设置为指令，然后单击时，我发出了“hide-name”指令拾取的“uniqueID”。

我仍然不确定为什么 Vue 没有在视觉上更新浏览器，但我猜它一定与“virtual-dom”有关。

演示: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');
        });
    }
});