为什么总是显示 <ul> 元素？ (Vue)

Question

我创建了一个showDropdown 属性，该属性会根据<a> 元素的点击事件发生变化。然后我使用v-if 隐藏/显示<ul>

我在 CSS 中使用了 flexbox。

这是我的 CSS 或 Vue 代码的问题吗？我不确定哪里出了问题。

模板

    <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 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

虽然建议的解决方案skitlele 是正确的，但我还向任何<a> 点击事件添加了prevent 修饰符。

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