Question

我想在单击“登录”时显示/隐藏登录表单。我以为可以使用jquery轻松做到这一点，但是由于某种原因什么也没发生？

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <body>
            <div id="loginElement" style="display:none;">
                <div id="app" class="loginElement">
                    <login></login>
                <div>
            </div>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container">

                        <div class="collapse navbar-collapse" id="navbarSupportedContent">

                            <!-- Right Side Of Navbar -->
                            <ul class="navbar-nav ml-auto">
                                <!-- Authentication Links -->
                                @guest
                                    <li class="nav-item">
                                        <a class="nav-link" id="connect">{{ __('SE CONNECTER') }}</a>
                                    </li>
                                    @if (Route::has('register'))
                                        <li class="nav-item">
                                            <a class="nav-link" href="{{ route('register') }}">{{ __('CREER UN COMPTE') }}</a>
                                        </li>
                                    @endif
                                @else
                                    <li class="nav-item dropdown">
                                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                            {{ Auth::user()->nom }} {{ Auth::user()->prenom }}<span class="caret"></span>
                                        </a>

                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="{{ route('logout') }}"
                                               onclick="event.preventDefault();
                                                             document.getElementById('logout-form').submit();">
                                                {{ __('Logout') }}
                                            </a>
                                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                                @csrf
                                            </form>
                                        </div>
                                    </li>
                                @endguest
                            </ul>
                        </div>
                    </div>
                </nav>

        @yield('contenu')

        <div id="app">
            <footercomponent></footercomponent>
        <div>

        <script src="../js/app.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


        <script>
            $('#connect').click(function() {
                $('#loginElement').toggle();
            });
        </script>
    </body>
</html>

如果用户单击其他位置，我也会将其隐藏。虽然登录表单位于vue.js中，并且它的位置是绝对的，所以我不确定这是否可行。

<template>
    <div>
        {{loggedin}}
        <div class="card login-card" v-if="isloggedin==false" >
            <label for="rememberme">SE CONNECTER</label>
            <input type="email" class="form-control round-border bottom-buttons-footer" placeholder="Email Address" v-model="email"/>
            <input type="password" class="form-control round-border bottom-buttons-footer" placeholder="Password" v-model="password"/>
            <label for="rememberme">Remember me</label>
            <input v-model="rememberme" type="checkbox" value="rememberme" id="rememberme">
            <button class="btn-connect round-border" v-on:click="login">SE CONNECTER</button>
            <button class="btn-noaccount round-border" v-on:click="register">JE N'AI PAS DE COMPTE</button>
        </div>
    </div>
</template>


<script>
    export default {
        nom: "login",
        data () {
            return {
                APP_URL: process.env.MIX_APP_URL,
                isloggedin: false,
                loggedin: ''
            }
        },
        computed:
        {
        },
        methods:{
            register(){
                window.location.href = this.APP_URL +'/register/';
            },
            login () {
                axios.post('/registration/login').then(
                    response => {
                        this.loggedin = response.data;
                    }
                );
            }
        }
    }
</script>

<style>
.login-card{
    max-width: 300px;
    z-index:10000;
    position: absolute;
    right: 0;
}


</style>

在刀片视图中显示/隐藏vuejs div

0 个答案: