我有一个Vuetify botnav;每个项目都是在某个路由器路径下激活的,我想在另一个路径下将其禁用。
active.sync当我想取消激活选项卡时,我尝试将其设置为-1,如果我从不激活botnav中的任何项目,则可以使用该功能,但是如果我激活了一个项目,然后再次设置active.sync = -1,它将自动激活该选项卡。第一项:
<v-bottom-nav
:active.sync="bottomNav"
:value="true"
shift
absolute
>
<v-btn
color="teal"
flat
value="recent"
>
<span>Recent</span>
<v-icon>history</v-icon>
</v-btn>
<v-btn
color="teal"
flat
value="favorites"
>
<span>Favorites</span>
<v-icon>favorite</v-icon>
</v-btn>
<v-btn
color="teal"
flat
value="nearby"
>
<span>Nearby</span>
<v-icon>place</v-icon>
</v-btn>
</v-bottom-nav>
在脚本中:
watch:{
$route:function(to, from){
switch(to.path){
case "/0":
this.bottomNav=0;
break
case "/1":
this.bottomNav=1;
break
case "/2":
this.bottomNav=2;
break
default: this.bottomNav=-1
}
}
}
我确实找到了一种可行的解决方案,方法是在botnav中设置一个虚拟的隐藏项目并将该项目的v-show设置为false,当我想停用所有项目时,我激活了这个未显示的项目,结果我想要的是:
一个虚拟物品:
<v-bottom-nav
:active.sync="bottomNav"
//more stuff
>
//other items
<v-btn v-show="0" value="inactivate"></v-btn>
</v-bottom-nav>
并在我想停用脚本中的所有项目时执行以下操作:
this.bottomNav = "inactivate"
这种工作方式,但那有点怪异,是否有更正式/优雅的方式来做到这一点?
相关分类