在 Vue 中使用图标切换 b 侧边栏

Question

我有一个使用 bootstrap-vue 的侧边栏。我使用 2 个图标来切换此侧边栏。单击图标时，我使用 function(){isOpen = !isOpen} 并将 isOpen 初始化为 false 来切换侧边栏并将图标从栏更改为关闭，效果很好。在侧边栏中，我有一个 ul 标签和几个带有 router-link 的 li 标签。我的问题是，当我使用路由器链接到另一条路由时，图标仍然没有改变，因为现在 isOpen 是真的。单击路由器链接时，如何将 isOpen 设置为 false。我想我需要将图标绑定到 b-sidebar 的某个属性，但我找不到它。请帮我！这是我遇到的问题的图片。

这仍然有效。侧边栏正在打开，图标变为关闭图标

这是我遇到的问题。我将路由器链接到“关于我们”屏幕，该图标仍然是关闭图标。它应该是条形图标

Answer 1

如果isOpen 是组件的data 对象的一部分（我假设是这样，但您没有提供足够的信息），您可以在li 标签上设置@click 侦听器并创建一个方法切换它： 模板：

<li @click="closeSidebar">My link</li>

脚本：

...
methods: {
    closeSidebar() {
        this.isOpen = false;
    }
}