防止表单提交触发表单关闭

Question

我遇到了一个问题：我有一个显示登录的小用户菜单。为了处理外部点击以再次关闭菜单，我实现了这个小助手：

<on-click-outside :do="handleClickOutside">
    <Login/>
</on-click-outside>

这触发

 handleClickOutside () {
 if (this.open) {
  this.open = false;
  }
},

好吧。 这是组件：

<script>
    export default {
        props: ["do"],
        mounted () {
            const listener = e => {
                if (e.target !== this.$el && !this.$el.contains (e.target)) {
                    this.do ();
                }
            };
            document.addEventListener ("click", listener);
            this.$once ("hook:destroyed", () => {
                document.removeEventListener ("click", listener);
            });
        },
        render () {
            return this.$slots.default[0];
        }
    };
</script>

这工作正常，但如果我以这种方式登录：

<ValidationObserver ref="loginform" v-if="!authenticated">
<form v-on:submit.prevent>
...
<button
    :class="{'btn shadow-lg sm:text-base': true, 'opacity-50 cursor-not-allowed': $wait.is('user.login')}"
    @click.prevent="login">
    Login
</button>

</form>
</ValidationObserver>

正在触发handleClickOutside方法，并且登录表单不可见。 知道为什么会这样吗？