Is there a way to close a vue component by clicking outside of it?

Question

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?

{{item.name}}

1 X

€{{item.unit_price}}

TOTAL:

€2,860.00

PROCEED TO CHECKOUT

VIEW CART

module.exports = { data: function () { return{ cartitems: 0, carthover: false, } }, created(){ EventBus.$on('addToCart', (payload) =>{ this.cartitems = payload }), EventBus.$on('mouseover', (carthover) =>{ this.carthover = carthover }) } } JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

I created a div element at the end of the component like that:

Where .outside class is specified in CSS as follows: .outside { width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; } And away() is a method in Vue instance as: away() { this.isPopup = false; } Easy, works well.