Почему элемент <ul>всегда отображается?(Вью)

Question

Я создал свойство showDropdown, которое изменяется в зависимости от событий щелчка элемента <a>. Затем я использую v-if, чтобы скрыть / показать <ul>

Я использовал flexbox для CSS.

Это проблема с моим кодом CSS или Vue? Я не уверен, где что-то пошло не так.

Template

    <template>
        <div>
            <nav>
                <ul class="nav-links">
                    <router-link to="/" tag="li" exact>Home</router-link>
                    <router-link to="/portfolio" tag="li">Go to Portfolio</router-link>
                    <router-link to="/stocks" tag="li">Go to Stocks</router-link>
                </ul>
                <ul class="nav-links">
                    <router-link to="/dsfsdf" tag="li" exact>End Day</router-link>
                    <li>
                        <a 
                            href="#" 
                            data-toggle="dropdown"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false"
                            @click="showDropdown = !showDropdown">Save & Load <i class="arrow down"></i></a>
                        <ul :if="showDropdown" class="dropdown">
                            <li><a href="#">Save Data</a></li>
                            <li><a href="#">Load Data</a></li>
                        </ul>
                    </li>                
                </ul>
            </nav>
        </div>
    </template>

Сценарий

    <script>
        export default {
            data() {
                return {
                    showDropdown: false
                }
            }
        }
    </script>

Style

    <style scoped>
        * {
            margin: 0;
            padding: 0;
        }
        nav {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            max-width: 70%;
            margin: 10px auto;
            background-color: lightgray;
            border: 1px solid black;
            border-radius: 10px;
            padding: 5px;
        }

        .nav-links {
            display: flex;
            margin: 0 10px;
            flex-flow: row wrap;
        }

        li {
            list-style-type: none;
            padding: 5px;
            cursor: pointer;
        }

        .dropdown {
            position: absolute;
            display: flex;
            flex-flow: column nowrap;
            background-color: white;
            border: 1px solid black;
            border-radius: 10px;
            margin-top: 8px;
        }

        .dropdown li:hover {
            background: grey;
        }

        /* Arrow icon */
        i {
            border: solid black;
            border-width: 0 3px 3px 0;
            display: inline-block;
            padding: 3px;
        }
        .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        /* Router Link when active */
        .router-link-active {
            background-color: white;
        }
    </style>

Answer 1

Несмотря на то, что предложенный вариант решения проблемы верен, Id также добавляет модификатор prevent к любым <a> событиям щелчка.

<a @click.prevent="showDropdown = ! showDropdown" />