javascript - How to check clicks of the user in order to toggle popup? [VueJS] -

i have list component , contains hidden popup facebook. example click item on list, , shows popup item here interface mentioned

here template

<template id="adboard-group-sidebar-member-template"> <li class="card-item" data-member-id="{{ member.id }}" @click="togglemembercard"> item content </li> </template> 

here vuejs

togglemembercard(event) {         this.popupdisplayed = !this.popupdisplayed;     }, 

it runs v-if / v-show attributes. works on item list. if user wants click location on interface. i'm checking following lines:

popuplistener(event) {         let element = $(event.target),             allcard = $(document).find('.popup'),             pointer_popup = element[0].closest('.popup'),             pointer_card = element[0].closest('.card-item');          if ((!pointer_popup && !pointer_card) || (pointer_popup && pointer_card)) {             allcard.hide();         }     } 

also listens in ready method of vuejs. not solution. wonder , better solution vuejs.

i think need adding custom directive handle clicks outside element (i.e., popup).

vue.directive('click-outside', {   bind: function (el, binding, vnode) {     el.event = function (event) {       // here check click outside el , childrens       if (!(el == event.target || el.contains(event.target))) {         // , if did, call method provided in attribute value         vnode.context[binding.expression](event);       }     };     document.body.addeventlistener('click', el.event)   },   unbind: function (el) {     document.body.removeeventlistener('click', el.event)   }, }); 

here's working demo

you can find more info custom directives , el, binding, vnode means in https://vuejs.org/v2/guide/custom-directive.html#directive-hook-arguments