Dfyjkt

I have this Vue code:

export default 
 data: function() 
 return 
 'showPopup': false
 
 ,
 components: 
 'search-bar': SearchBarComponent,
 ,
 mounted: function() 
 $(this.$el).foundation();
 ,
 updated: function() 
 $(this.$el).foundation();
 ,
 methods: 
 clickOutsidePopup: function(event) 
 console.log(event);
 
 ,
 directives: 
 clickoutside: 
 bind (el) 
 el.event = event => el.vm.$emit(el.expression, event)
 el.addEventListener('click', el.stopProp)
 document.body.addEventListener('click', event)
 , 
 unbind(el) 
 el.removeEventListener('click', el.stopProp)
 document.body.removeEventListener('click', el.event)
 ,

 stopProp(event) event.stopPropagation() 
 
 
 

And inside the template I have this:

<div class="small-screen popup-container">
 <div class="popup" v-show="showPopup" v-clickoutside="clickOutsidePopup">
 <search-bar />
 </div>
 </div>

which will be shown/hidden if we click on this:

<a href="#"> <span @click="showPopup = !showPopup">🔍</span></a>

My problem is that my directive does not execute clickOutsidePopup. When I click outside of my element? I was inspired by this: Detect click outside element

I managed to make it work with this directive code:

 directives: 
 clickoutside: 
 bind: function (el, binding, vnode) 
 el.clickOutsideEvent = function (event) el.contains(event.target))) 
 // and if it did, call method provided in attribute value
 vnode.context[binding.expression](event);
 
 ;
 document.body.addEventListener('click', el.clickOutsideEvent)
 ,
 unbind: function (el) 
 document.body.removeEventListener('click', el.clickOutsideEvent)
 ,
 
 

added an id to the search button:

<span id="top-bar-search-icon" @click="showPopup = !sho wPopup">🔍</span>

and modified my method:

 methods: 
 clickOutsidePopup: function(event) 
 if (event.target.id !== "top-bar-search-icon")
 this.showPopup = false;
 
 ,