Question

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

指令代码也在下面（以安抚stackoverflow＆＃39; s。规则）。

样式

.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

所以我从另一个角度尝试了这个，并制作了隐藏名称＆＃39;同时对一个指令进行属性，然后点击我发出的“唯一ID”＆＃39;哪个＆＃39; hide-name＆＃39;指令捡起来。

我仍然不确定为什么Vue没有在视觉上更新浏览器，但我猜测它必须与“虚拟世界”有关。

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

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

1 个答案: