Support for inline expressions

[Danktuary]

Support for inline expressions would be neat. Instead of doing all this:

<template>
	<button @click="showStuff = !showStuff" v-click-outside="hideStuff">
		Settings
	</button>
</template>

<script>
export default {
	// ...
	methods: {
		hideStuff() {
			this.showStuff = false;
		},
	},
};
</script>

It could be simplified to this:

<template>
	<a href="#" @click.prevent="showMenu = !showMenu" v-click-outside="showMenu = false">
		Settings
	</a>
</template>

Of course, that probably isn't the only use-case, but just the first one that comes to mind. 😄

[ndelvalle]

Hi, @Danktuary indeed this could simplify things, sorry for the delay in answering this. I think this can be solved using the binding expression.
Do you mind trying to implement it 🙂I can give you a hand if you want, otherwise, I will make some time to do it.

[Danktuary]

Sure, I don't mind giving it a shot! No promises though because I don't have much experience with Vue directive dev. 😅 But I'll give it a go in the next couple days.

[ddenev]

@ndelvalle , is there any development in this direction?

[ndelvalle]

@drank not at the moment 😔. Any help would be appriciated 👍

[monkeyWzr]

@ndelvalle It seems we cannot make it possible to support inline expressions as we want. Check this issue Evan You answered: vuejs/vue#6753

Arrow functions might get things done, but it does not work properly based on current release(2.1.1) because document.removeEventListener() cannot remove anonymous listeners.

v-click-outside/lib/v-click-outside.js

Line 58 in cb62ea3

document.removeEventListener(event, handler),

As a result, it will repeatly add the same anonymous listener everytime we click outside the element.

We need to do some improvements to fully support these usages below. (I'm still trying:dizzy_face:...)
(The case @Danktuary refered above)

<template>
	<a href="#" @click.prevent="showMenu = !showMenu" v-click-outside="() => showMenu = false">
		Settings
	</a>
</template>

(Other common cases)

import vClickOutside from 'v-click-outside'

<template>
  <div v-click-outside="onClickOutside(id)"></div>
</template>

<script>
  export default {
    directives: {
      clickOutside: vClickOutside.directive
    },
    methods: {
      onClickOutside(id) {
        return (event, el) => {
            console.log('Clicked outside. id: ', id, ', Event: ', event)
        }
        
      }
    }
  };
</script>

[ndelvalle]

@monkeyWzr I see. I thought this was going to be possible without the arrow function, but apparently not.

About the arrow function usage:
If we save the arrow function in a variable we can still remove the event listener, for example:

const func = (arg) => console.log(arg)

// Add event listener
document.addEventListener('keyup', func)

// Remove event listener
document.removeEventListener('keyup', func)

[monkeyWzr]

@ndelvalle Thanks a lot!

[monkeyWzr]

@ndelvalle Sorry I was focusing on the wrong point. The reason the removeEventListener doesn't work is not about arrow functions (because they are already been wrapped up and saved in the global directive variable), it's about the setTimeout instead.

The current code for binding

v-click-outside/lib/v-click-outside.js

Line 74 in c59e1d3

setTimeout(document.addEventListener, 0, event, handler),

somehow makes removeEventListener work unexpectly. After I change it to

setTimeout(() => document.addEventListener(event, handler), 0)

removeEventListener works as we want.

Please check the PR #69 (including test cases updates). Thank you very much!