Click outside

The v-click-outside directive calls a function when something outside of the target element is clicked on. This is used internally by components like v-menu and v-dialog.

Usage

The v-click-outside directive allows you to provide a handler to be invoked when the user clicks outside of the target element.

v-click-outside/usage.vue

API

Examples

Options

Close conditional

Optionally provide a closeConditional handler that returns true or false. This function determines whether the outside click function is invoked or not.

v-click-outside/option-close-on-outside-click.vue

Include

Optionally provide an include function in the options object that returns an array of HTMLElements. This function determines which additional elements that the click must be outside of, for the handler to be called.

v-click-outside/option-include.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.