如何使用nav-tabs设置活动类

Question

我正在使用Bootstra 3 nav-tabs组件作为我的主要导航栏，但我无法弄清楚如何根据类绑定设置活动菜单。

在下拉导航的任何按钮旁边显示/隐藏下一个菜单栏，但活动类不运行

你可以帮帮我吗？

预期：菜单可以显示标签处于活动状态，当点击按钮下拉列表活动标签处于活动状态时单击按钮

这是我一直在尝试的事情：

<li :class="{ active : active_el == 1 }" data-wow-delay="0.14s">
  <a @click="activateProfile" data-toggle="tab" aria-expanded="false">profile</a>
</li>
...
activateProfile() {
  this.initTabsState()
  this.isProfile = true
  this.isTabMore = false
}

这里是我的小提琴

https://jsfiddle.net/dede402/x62p6xwm/

Answer 1

您的activateProfile()功能中存在问题，您必须为个人资料设置active_el = 1，反之亦然。一切都很好。您需要修改activate...()函数：

activateProfile() {
  // you need to instantiate the `active_el` as well for it to work.
  this.active_el = 1 
  this.initTabsState()
  this.isProfile = true
  this.isTabMore = false
}

继承了工作示例的fiddle。