Vuetify Bottom Navigation update: активное событие - PullRequest
Новая
       9

Vuetify Bottom Navigation update: активное событие

1 голос
/ 13 марта 2019

Я изучаю Vue.js и использую библиотеку vuetify.js, и пока это доставляет мне удовольствие.Однако я немного пытаюсь понять, как события в компонентах пользовательского интерфейса могут вызываться из кода JS.

В случае нижней панели навигации, согласно документации, поддерживается событие под названием 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 Ответ

0 голосов
/ 13 марта 2019

Я думаю, что вы читаете вещи неправильно здесь.

Дело не в том, что вы можете отправить событие на панель / кнопки - скорее, активная кнопка будет генерировать событие для уведомлениякогда он становится активным.

Я не пользователь vuetify, но если предположить, что он следует обычному шаблону событий в Vue, тогда он будет вызывать this.$emit('update:active'), который вы можете привязать в своем коденапример: 

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

Пользовательские события Vue Docs находятся здесь: https://vuejs.org/v2/guide/components-custom-events.html

Если вы хотите переключать состояние кнопки «удаленно», тогда, глядя на документы, вы бынужно сделать что-то вроде: 

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

А затем изменить buttonState в другом месте, чтобы переключить активное состояние кнопки.

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

...