Comment puis-je simuler un bouton différent lorsqu'un bouton est pressé ?

Question

Est-il possible, en utilisant vue.js, de simuler l'enfoncement d'un autre bouton lorsqu'un bouton est enfoncé ?

Par exemple, si j'appuie sur la touche ↓ (Flèche vers le bas), je voudrais qu'il soit représenté comme si j'avais appuyé sur la touche TAB bouton.

Explication de la raison pour laquelle j'essaie d'implémenter ceci :

Après avoir cliqué sur une liste DropDown, la liste avec tous les éléments s'ouvre. Dans cette liste, j'ai un <input> comme boîte de recherche, qui est utilisée pour rechercher d'autres éléments dans la liste (tous les autres éléments sont directement listés sous cette boîte de recherche). Actuellement, lorsque la liste DropDown s'ouvre, le focus est automatiquement placé sur la boîte de recherche. Pour passer à l'élément suivant, vous devez appuyer sur la touche TAB bouton. Mais j'ai besoin de réaliser cela avec le ↓ (Flèche vers le bas).

Answer 1

I pensez à vous demandez comment simuler un TAB lorsque l'utilisateur appuie sur DOWN dans le but de déplacer le focus vers la prochaine entrée focalisable.

Au lieu de réécrire le key -vous pouvez appeler HTMLElement#focus() sur le frère ou la sœur suivant(e) :

<!-- 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

Bien sûr, ajoutez une référence à tab

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

Puis clic sur la flèche de capture :

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