how to hide dropdown menu if we click outside the menu in vuejs

Question

I am using a dropdown menu components in vuejs to make normal dropdown menu. My code is for dropdown component is :

Answer 1

You can make use of the blur event, e.g. if you add a method:

close() {
    setTimeout(() => {
        this.state = false;
    }, 200);
}

And set the blur event for your link:

toggle menu

Then the dropdown will get hidden whenever your toggle link loses focus. The setTimeout is necessary because Javascript click events occur after blur, which would result in your dropdown links being not clickable. To work around this issue, delay the menu hiding a little bit.