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

だから私は、別の角度aから、これを試してみましたまた、 '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'); 
     }); 
    } 
});