如何使用 v-on 和布尔语句为下拉列表设置动画

Question

我一直在尝试使用我刚刚从稍微过时的 VueJs 课程中学到的知识来使 dropdown 正常打开和关闭（为其设置动画），但它不起作用。在那里设置我的路由后，我会进一步。

似乎以前，在 Bootstrap 中，下拉列表使用 .open 而不是 .show。

我认为我可以尝试使用 @click 方法并让它发挥作用。如果将 data 处的 Boolean 切换为 true，则 dropdown 将默认打开，但我现在明白为什么它在切换时不遵守 v-on 指令boolean 语句从 true 到 false 等等。

HTML下方

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <router-link to="/" class="navbar-brand"><a>Stock Trade</a></router-link>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <router-link :to="{ name: 'portfolio'}" tag="li" class="nav-item nav-link"><a>Portfolio</a></router-link>
                <router-link :to="{name: 'stocks'}" tag="li" class="nav-item nav-link"><a>Stocks</a></router-link>
            </ul>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item nav-link">End Day</li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"
                       href="#"
                       role="button"
                       data-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false">
                        Save & Load <span class="dropdown-toggle-no-caret"></span>
                    </a>
                    <!-- I must understand why it does not work below-->
                    <div class="dropdown-menu"
                         :class="{show: isDropping}"
                         @click="isDropping = !isDropping"
                         aria-labelledby="navbarDropdown">
                        <a class="dropdown-item " href="#">Save Data</a>
                        <a class="dropdown-item" href="#">Load Data</a>
                    </div>
                </li>
               <strong class="navbar-text" style="color: dimgray">Funds: {{$store.state.funds + ' EUR'}}</strong>
            </ul>
        </div>
    </nav>
</template>

下面的脚本部分

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

</script>

我已经在 template 和下面硬编码了一些 style，直到我尝试设置它们。

<style scoped>
    a {
        color: dimgray;
    }
</style>

在此先感谢大家。

Answer 1

马上看不出有什么问题。

您确定 @click 事件正在触发吗？如果该元素被另一个元素覆盖，它将妨碍点击事件。

编辑：

你可以运行这样的测试：

改变

@click="isDropping = !isDropping"

到

@click="test"

并在下面添加一个新方法data:

methods: {
    test() {
        console.log('Click worked!);
    }
}

如果看到日志，请检查开发人员工具的控制台。

如何使用 v-on 和布尔语句为下拉列表设置动画

How do I animate a dropdown list using v-on & boolean statements

vue.js

bootstrap-4

vue-cli

bootstrap-vue