在 Vue 中使用图标切换 b-sidebar

Question

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

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

这就是我遇到的问题。我路由器-link 到关于我们屏幕，图标仍然是关闭图标。应该是横条图标

Answer 1

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

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

脚本：

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

在 Vue 中使用图标切换 b-sidebar

toggle b-sidebar with an icon in Vue

vue.js

toggle

bootstrap-vue