如何使用 v-on 和布尔语句对下拉列表进行动画处理

Question

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

似乎以前，在 Bootstrap 中，它没有使用.show而是将.open用于下拉列表。

我想我可以玩一个@click的方法并让它工作。如果您在data处将Boolean切换为 true，则默认情况下dropdown将打开，但我现在明白为什么在将boolean语句从true切换到false等时它不会遵守v-on指令。

下面的网页

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

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

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

提前感谢大家。

Answer 1

看不出有什么问题。

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

编辑：

您可以像这样运行测试：

改变

@click="isDropping = !isDropping"

自

@click="test"

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

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

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