时间戳

首页 > 解决方案 > Vuetify 底部导航更新：活动事件

vue.js - Vuetify 底部导航更新：活动事件

问题描述

我正在学习 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

  }
}

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

标签： vue.jsvue-componentvuetify.js

解决方案

我认为你在这里读错了。

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

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

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

自定义事件 Vue 文档在这里：https ://vuejs.org/v2/guide/components-custom-events.html

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

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

然后buttonState在其他地方修改以切换按钮的活动状态。

https://vuetifyjs.com/en/components/buttons

推荐阅读