我有这个由Bootstrap管理的组件，特别是其中的nav-tabs小部件之一，在您单击Bootstrap时显示和隐藏。
Bootstrap跟踪使用.active该类单击了哪个项目。并且，在Vue中，我将某个特定的nav初始化为在页面加载时处于活动状态。但是，一旦完成，我希望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-这就是set .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（需要实时更新徽章子级）。
该组件有点用。我认为主要是因为this.$store.state.active_tab的值不会发生变化，因此Vue不会重新呈现。但这充其量似乎很脆弱。
使用Vue仅设置某些变量的初始值，然后放弃控制权而不使用的最佳实践是什么v-once？
我只需要访问该a.nav-link元素并将.active类classList直接添加到其即可。
您可以将ref属性添加到a.nav-lank元素链接，以便：
<a class="nav-link" ref="link" ...>
...
</a>
然后.active在mounted钩子中添加类：
mounted() {
if (this.link === this.$store.state.active_tab) {
this.$refs.link.classList.add('active');
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句