Styjun

I am looking for a way to close a component when there it a click outisde of the element.

I tried an addEventListener.
This closes the component but after being closed it will not open again.

window.addEventListener('click', function(e)

if (document.getElementById('shopcartpreview').contains(e.target))
console.log("Clicked in Box");


 else
console.log("Clicked outside Box");
$('#shopcartpreview').hide();
 
 )

Is there a way to accomplish this?

<template>
 <div id="shopcartpreview" v-if="carthover">
 <div class="cartitem" v-for="item in cartitems">
 <div class="cartitempic"><img class="productImg" width="80px" height="80px" v-bind:src="'assets/products/' + item.image"></div>
 <div class="cartitemdetails">
 <div class="cartitemname">item.name</div>
 <div class="cartitemqty">1 X </div>
 <div class="cartitemprice">€item.unit_price</div>
 </div>
 <div class="cartitemdelete">
 <img src="assets/images/icon-bin.png" width="15px" height="15px">
 </div>
 </div>

 <div class="carttotal">
 <div class="carttotaltext">TOTAL:</div>
 <div class="carttotalprice">€2,860.00</div>
 </div>
 <div class="cartcheckouttbn">PROCEED TO CHECKOUT</div>
 <div class="viewcart">VIEW CART</div>



 </div> 
</template>
<script>
 module.exports = 
 data: function () 
 return 
 cartitems: 0,
 carthover: false,
 
 ,
 created()
 EventBus.$on('addToCart', (payload) =>
 this.cartitems = payload
 ),
 EventBus.$on('mouseover', (carthover) =>
 this.carthover = carthover
 )
 
 
</script>

Demo Fiddle : https://jsfiddle.net/bq8m4fhe/

Create a clickoutside directive ... Detect click outside element

 module.exports = 
 data: function () 
 return 
 cartitems: 0,
 carthover: false,
 
 ,
 directives: 
 clickoutside: 
 bind: function (el, binding, vnode) 
 el.clickOutsideEvent = function (event) ;
 document.body.addEventListener('click', el.clickOutsideEvent)
 document.body.addEventListener('touchstart', el.clickOutsideEvent)
 ,
 unbind: function (el) 
 document.body.removeEventListener('click', el.clickOutsideEvent)
 document.body.removeEventListener('touchstart', el.clickOutsideEvent)
 ,
 stopProp(event) event.stopPropagation() 
 
 ,
 created()
 EventBus.$on('addToCart', (payload) =>
 this.cartitems = payload
 ),
 EventBus.$on('mouseover', (carthover) =>
 this.carthover = carthover
 )
 
 

Use that directive like this.

<div id="shopcartpreview" v-if="carthover" v-clickoutside="SHOPPING_CART_HIDE_FUNCTION">