<template> <div v-clickaway="clickOutside">Hide me</div> </template> <script> Vue.directive('clickaway', { bind (el, { value }) { if (typeof value !== 'function') { console.warn(`Expect a function, got ${value}`); return; } document.addEventListener('click', e => el.contains(e.target) || value()); } }); export default { methods: { clickOutside () { // your logic here } } } </script>
How to Define Vue Js Click Away Directive
Learn how to define Vue Js click away directive to trigger a function when the user clicks outside of the bound element
Created on Sep 11, 2021
•63 views
If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️
Load comments for How to Define Vue Js Click Away Directive
PostSrc Code Components
Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.
View ComponentsSponsors 👑
+ Add YoursOther Code Snippets
All Snippets
How to Enable Laravel Horizon Dark Mode
11 months ago

How to Query Column That is Not Null In Laravel
8 months ago

How to get MAC Address on Macbook using the Command Line
1 month ago

Conditionally Include Partial Views in Laravel Blade
11 months ago

How to Redirect to External URL in Laravel
4 months ago

How to Conditionally Query Eloquent in Laravel
8 months ago