how to hide element when click outside vuejs
//work fine in vue.js 2
/*
<div id="menu" @click="show" v-click-outside="hide" v-bind:class="{active: isActive}">
<div>
click outside me
</div>
</div>
*/
Vue.directive('click-outside', {
bind: function (el, binding, vnode) {
this.event = function (event) {
if (!(el == event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', this.event)
},
unbind: function (el) {
document.body.removeEventListener('click', this.event)
},
});
new Vue({
el: "#menu",
data: {
isActive: true
},
methods: {
show: function() {
this.isActive = true;
},
hide: function() {
this.isActive = false;
}
}
});