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

时间:2017-04-03 10:09:19

标签: javascript vue.js vuejs2

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

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

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

指令代码也在下面(以安抚stackoverflow' 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: {}
})

1 个答案:

答案 0 :(得分:0)

所以我从另一个角度尝试了这个,并制作了隐藏名称&#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');
        });
    }
});