Почему mouseout не так работает?

Question

[lemonlimelike]

Вот небольшой кусочек кода:

<div class="uk-inline">
                            <a href="#" class="uk-icon-button" @mouseover="showDrop = !showDrop">
                                <ion-icon name="person" size="large" class="uk-border-circle icon-user"></ion-icon>
                            </a>
                            <div class="dropdown uk-box-shadow-medium" v-show="showDrop" @mouseout="showDrop = false">
                                <div class="auth" v-show="showAuth">
                                    <div class="uk-card">
                                        <div class="auth-title">
                                            <span class="uk-text-bold">Авторизация</span>
                                        </div>
                                        <div class="uk-card-body auth-body">
                                            <form method="POST" action="{{ route('login') }}" aria-label="{{ __('Login') }}">
                                                @csrf
                                                <div class="auth-form">
                                                    <input id="email" type="email" class="uk-input form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus placeholder="{{ __('Логин') }}">
                                                    @if ($errors->has('email'))
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('email') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="auth-form">
                                                    <input id="password" type="password" class="uk-input form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required placeholder="{{ __('Пароль') }}">
                                                    @if ($errors->has('password'))
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('password') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="auth-form">
                                                    <a class="uk-link uk-link-reset" href="{{ route('password.request') }}">
                                                        {{ __('Забыли пароль?') }}
                                                    </a>
                                                </div>
                                                <div class="auth-form">
                                                    <button type="submit" class="uk-button auth-form-button">
                                                        {{ __('Войти') }}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="auth-form auth-form-reg">
                                            <span class="uk-text">Вы еще не с нами?:)</span>
                                            <br>
                                            <a @click="onClick" href="#" class="uk-link auth-form-reg-link">Зарегистрироваться!</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="auth" v-show="showReg">
                                    <div class="uk-card">
                                        <div class="auth-title">
                                            <span class="uk-text-bold">Регистрация</span>
                                        </div>
                                        
                                        <div class="auth-form auth-form-reg">
                                            <span class="uk-text">Вы еще не с нами?:)</span>
                                            <br>
                                            <a @click="onClick" href="#" class="uk-link auth-form-reg-link">Зарегистрироваться!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

И вот vue:

new Vue({
            el:"#header",
            data:{
                showDrop:false,
                showAuth: true,
                showReg: false
            },
            methods:{
                 onClick: function(){
                    this.showAuth = !this.showAuth
                    this.showReg = !this.showReg
                }
            }
        })

При наведении на icon появляется меню, и если убрать курсор с этого меню срабатывает событие mouseout, то есть меню пропадает... а если в этом меню навести на input, то меню сразу же пропадает... Input же часть этого меню, почему оно пропадает?
Вот jsfiddle: https://jsfiddle.net/eywraw8t/84898/

Answer 1

[0xD34F]

Всё работает так, как и должно. Чтобы получить требуемое поведение, надо обрабатывать другие события:

@mouseenter="showDrop = true"
@mouseleave="showDrop = false"

UPD. А зачем два свойства для управления отображением форм? Они что, могут показываться одновременно? Может, лучше сделать одно свойство, которое будет содержать имя показываемой формы? Как-то так:

data: () => ({
  showForm: 'auth',
  // ...
}),

Форма авторизации: v-show="showForm === 'auth'", @click="showForm = 'reg'".
Форма регистрации: v-show="showForm === 'reg'", @click="showForm = 'auth'".

Comments

[FerelUltra]

Красава.

Answer 2

[Александр Урих]

https://jsfiddle.net/koyxm8u3/1/