0

我在使用Buefy和 Vue 时遇到了一些问题。我有一个简单的 SPA（单页应用程序），它使用vue-router. 我有一个如下所示的下拉列表：

  <b-dropdown class="user-dropdown" v-model="navigation" position="is-bottom-left">
    <a class="navbar-item" slot="trigger">
      <span class="tag is-rounded has-text-weight-semibold avatar">OB</span>
    </a>
    <div class="columns is-marginless">
      <div class="column has-text-centered">
        <router-link to="home">
          <b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-search"></b-icon>
        </router-link>
      </div>
      <div class="column has-text-centered">
        <router-link to="dashboard">
          <b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-contact"></b-icon>
        </router-link>
      </div>

    </div>
  </b-dropdown>

让下拉菜单显示效果很好。如果我单击页面上可见下拉列表之外的任何位置，它也会隐藏。

我的问题是，我有一个单页应用程序，所以当我“更改”页面（单击链接）时，页面更改时下拉菜单仍然可见。

例子：

在下面的页面上：

www.example.com/#/home

我单击打开的下拉菜单，然后单击dashboard链接，它给了我：

www.example.com/#/dashboard

但下拉菜单仍然可见。

任何人都知道我该怎么做，所以当我点击里面的链接时下拉菜单会切换吗？

更新： 我在 Chrome 中使用 Vue Dev 工具，我可以看到，当我单击下拉列表以使其切换到活动状态时，我看到了：

name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:true

当我单击页面上的任意位置以关闭下拉菜单时，它看起来像这样：

name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:false
4

1 回答 1

0

无论下拉列表正在监视状态都不会改变，因为在 SPA 中它只是 javascript。我不知道关于 Buefy 的细节，但你必须在路由器负载时设置状态变量，或者观察某种变量来告诉菜单你的应用程序的另一部分中的某些东西是不同的。

于 2018-08-22T19:39:58.910 回答