<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
•100 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
Laravel Where Not In Condition (Eloquent)
1 year ago

How to Rename the master branch to main in Git
1 year ago

How to hide search box in select2
1 year ago

Laravel Intervention Image Change Driver
1 year ago

How to Set Variables in a Laravel Blade Template
1 year ago

How to Install Mcrypt PHP Extension for Laravel Application
1 year ago