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

Question

这工作：https://jsfiddle.net/hxyv40ra

然而，当我把这个代码VUE指令被触发按钮事件的内部和控制台显示的类被删除但没有视觉上的变化？

下面是一个例子：https://jsfiddle.net/hLga2jxq

指令代码也低于（安抚计算器的规则）。

风格

.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

所以，我想从另一个角度nd也为'hide-name'属性指定了一个指令，然后在点击时我发出'unique-id'这个'hide-name'指令。

我还不确定为什么Vue没有在视觉上更新浏览器，但我猜它必须与'虚拟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'); 
     }); 
    } 
});