Как я могу имитировать нажатие другой кнопки при нажатии кнопки?

Question

Можно ли использовать vue.js для имитации другой кнопки, нажатой при нажатии кнопки?

Например, если я нажму кнопку ↓ (стрелка вниз), я бы хотелэто должно быть представлено, как если бы я нажал кнопку TAB .

Объяснение, почему я пытаюсь реализовать это:

После нажатия на кнопкуDropDown list, открывается список со всеми элементами.В этом списке у меня есть элемент <input> в качестве поля поиска, который используется для поиска других элементов в списке (все остальные элементы прямо перечислены в этом окне поиска).В настоящее время при открытии списка DropDown фокус автоматически устанавливается на поле поиска.Чтобы перейти к следующему пункту, вам нужно нажать кнопку TAB .Но мне нужно добиться этого с помощью кнопки ↓ (стрелка вниз).

Answer 1

I думаю вы спрашиваете, как имитировать нажатие TAB , когда пользователь нажимает ВНИЗ с целью перемещения фокуса на следующий фокусируемый ввод.

Вместо переписывания события key, вы можете позвонить HTMLElement#focus() на следующего брата:

<!-- TEMPLATE -->
<input type="text"
    @keydown.up.stop.prevent="prevInput"
    @keydown.down.stop.prevent="nextInput"
    v-for="i in 5">

// SCRIPT
methods: {
  nextInput(e) {
    const next = e.currentTarget.nextElementSibling;
    if (next) {
      next.focus();
    }
  },
  prevInput(e) {
    const prev = e.currentTarget.previousElementSibling;
    if (prev) {
      prev.focus();
    }
  },
}

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <input type="text"
         @keydown.up.stop.prevent="prevInput"
         @keydown.down.stop.prevent="nextInput"
         v-for="i in 5">
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    nextInput(e) {
      const next = e.currentTarget.nextElementSibling;
      if (next) {
        next.focus();
      }
    },
    prevInput(e) {
      const prev = e.currentTarget.previousElementSibling;
      if (prev) {
        prev.focus();
      }
    },
  }
})
</script>

Answer 2

Конечно, добавьте ссылку к tab

<div class="tab" ref="tab">

Затем нажмите стрелку:

arrowClick() {
   this.$refs.tab.click()
}