Vuetify Bottom Navigation update:active event

Question

I'm learning Vue.js and I'm using the vuetify.js library and so far its been a pleasure. However I'm struggling a little to understand how events on the UI components can be called from the JS code.

In the case of the bottom navigation bar, according to the documentation it supports an event called update:active, which updates the active button. You can pass in a string or a number whichever you prefer to change which button is active. I just can't figure out how this is done from a method. For instance if I had the following button

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

and the following method could then update the bottom navigation

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

  }
}

However this doesn't work. I'd be grateful for any info on this.

match match · Accepted Answer · 2019-03-12T21:38:28

I think you are reading things the wrong way round here.

It isn't that you can send an event to the bar/buttons - rather that the button which is active will emit an event to notify when it becomes active.

I'm not a vuetify user, but assuming it follows the usual event pattern in Vue, then it will be calling this.$emit('update:active') which you can bind to in your code by doing e.g.:

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

The custom event Vue docs are here: https://vuejs.org/v2/guide/components-custom-events.html

If you want to toggle the state of a button 'remotely' then looking at the docs you would need to do something like:

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

And then modify buttonState elsewhere to toggle the button's active state.

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

Vuetify Bottom Navigation update:active event

1 Answers