Question

我有这个由Bootstrap管理的组件，特别是其中一个nav-tabs小部件，当你单击Bootstrap显示和隐藏时。

Bootstrap使用.active类跟踪单击的项目。并且，在Vue中，我将某个导航初始化为在页面加载时处于活动状态。但是，一旦完成，我希望Vue将.active类管理完全放到Bootstrap。

<template>
<li class="nav-item"  v-if="toshow">
    <a class="nav-link" v-bind:id="'nav_' + link" 
    :class="{ active: isActive }" :aria-expanded="isActive"
    v-bind:href="'#'+link" data-toggle="tab" @click="onclick">
        {{label_}}
        <span v-if="badge" class="badge" :class="badge_level">{{badge}}</span>
        <span v-if="dynamic_badge" class="badge" :class="badge_level" >{{badge_value}}</span>
    </a>
</li>
</template>

在页面加载时，每个组件都会检查Vuex并确定其id是否在this.$store.state.active_tab中 - 这就是设置.active的内容。

    ,isActive: function(){

      //active_tab is where I specify which tab should be active
      //at first
      var res = this.link === this.$store.state.active_tab;

      return res;

    },

v-once不合适，因为我唯一要禁用的是计算.active（徽章子需要实时更新）。< / p>

该组件有效，有点。我认为主要是因为this.$store.state.active_tab的值不会发生变异，因此Vue不会重新渲染。但它充其量似乎很脆弱。

使用Vue仅设置某些变量的初始值，然后放弃控制而不使用v-once的最佳做法是什么？

Answer 1

我只需访问a.nav-link元素，然后直接将.active类添加到classList。

您可以在ref元素链接中添加a.nav-lank属性，以便：

<a class="nav-link" ref="link" ...>
  ...
</a>

然后在.active hook中添加mounted类：

mounted() {
  if (this.link === this.$store.state.active_tab) {
    this.$refs.link.classList.add('active');
  }
}

Vue.js.仅限初始化数据绑定的最佳实践？

1 个答案: