javascript - 如何停用 Vuetify botnav 组件中的所有项目？

Question

我有一个 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"

这可行，但是有点老套，有没有更正式/优雅的方法来做到这一点？

Answer 1

active.sync 的默认值未定义，因此请尝试使用 void重置:

this.bottomNav = void(0)

[https://jsfiddle.net/e8a67qtp/ ]