为什么总是显示<ul>元素？ （Vue）

Question

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

我将flexbox用于CSS。

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

尽管建议的解决方案是正确的，但ID还会向任何prevent点击事件中添加<a>修饰符。

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