Question

我已经根据执行的操作和后端的响应实施了选项卡激活。

以HTML格式

a.nav-link[data-toggle="tab" href="#answered" role="tab" :class="{ active: isActive('answered') }"
a.nav-link[data-toggle="tab" href="#all" role="tab" :class="{ active: isActive('all') }"

在Js中（在功能中。在all标签中添加答案后，我需要激活answered标签。）

this.questionTab = _.assign({}, this.questionTab, { activeTab: 'answered' })

功能isActive。

methods: {
  isActive: function(tab) {
    return this.questionTab.activeTab === tab;
  }
}

相同的实现在VueJS 1.0.18上运行良好但是将其更新为1.0.28后，它就停止了工作。

基本上我遇到的是拥有active类，并且在js中更改questionTab.activeTab的值（不是通过click），这并不是从中删除active类其他选项卡，即使条件返回false。

我尝试过v-bind:class="{ active: isActive('all') }"，但没有成功。

谢谢。

Answer 1

在这种情况下，您应该使用computed属性，当数据更改时它将重新计算

computed: {
  isActive () {
    return (tab) => this.positionTab.activeTab === tab
  }
}

如果以上代码不起作用，则可以将其分为2个计算出的属性

a.nav-link[data-toggle="tab" href="#answered" role="tab" :class="{ active: isActiveAnswer }"
a.nav-link[data-toggle="tab" href="#all" role="tab" :class="{ active: isActiveAll }"

和js

computed: {
  isActiveAnswer () {
    return this.positionTab.activeTab === 'answered'
  },
  isActiveAll () {
    return this.positionTab.activeTab === 'all'
  }
}

使用Vue 1.0.18时，带有VueJS 1.0.28的Bootstrap选项卡无法正常工作

1 个答案: