Vuetify 底部导航更新：活动事件

【问题标题】：Vuetify Bottom Navigation update:active eventVuetify 底部导航更新：活动事件
【发布时间】：2019-08-03 11:28:48
【问题描述】：

我正在学习 Vue.js，我正在使用 vuetify.js 库，到目前为止，我很高兴。但是，我很难理解如何从 JS 代码调用 UI 组件上的事件。

在底部导航栏的情况下，根据文档，它支持一个名为update:active 的事件，该事件会更新活动按钮。您可以传入一个字符串或一个数字，无论您喜欢更改哪个按钮处于活动状态。我只是无法弄清楚这是如何通过一种方法完成的。例如，如果我有以下按钮

<v-btn
      color="teal"
      flat
      @click="update"
      value="nearby"
    >

然后下面的方法可以更新底部导航

methods: {
  update: function () {   
    this.bottomNav.update:active(1);
    // Set the active button to 1

  }
}

但是这不起作用。如有任何相关信息，我将不胜感激。

【问题讨论】：

【解决方案1】：

我认为你在这里读错了。

这并不是说您可以向栏/按钮发送事件 - 而是处于活动状态的按钮会发出一个事件来通知它何时变为活动状态。

我不是vuetify 用户，但假设它遵循Vue 中的常用事件模式，那么它将调用this.$emit('update:active')，您可以通过以下操作在代码中绑定到它：

<v-btn v-on:update:active="doSomething"></v-btn>

如果您想“远程”切换按钮的状态，然后查看文档，您需要执行以下操作：

<v-btn :input-value="buttonState"></v-btn>

然后在别处修改buttonState以切换按钮的活动状态。

【讨论】：