Vue.directive('login-to-click', {
bind (el) {
const clickHandler = (event) => {
event.preventDefault()
event.stopImmediatePropagation()
alert('click')
}
el.addEventListener('click', clickHandler, true)
}
})
usage
<button @click="handleClick" v-login-to-click>CLICK</button>
handleClick is always triggered. How I can prevent that from directive? Tried with/without addEventListener "capture" flag without any luck.
For now I ended up with following solution:
Vue.prototype.$checkAuth = function (handler, ...args) {
const isLoggedIn = store.getters['session/isLoggedIn']
if (isLoggedIn) {
return handler.apply(this, args)
} else {
router.push('/login')
}
}
And then in component
<button @click="$checkAuth(handleClick)">CLICK</button>