title: Vue 2 Moving Window with Keyboard Navigation
body: <p>I have created a list in my program. In this list, you press ArrowUp or ArrowDown to navigate between the items that are generated with a v-for in said list. When you use the arrows to navigate the list, a counter is used to know which item inside this list is the &quot;selected&quot; one. My current problem is: When you &quot;select&quot; an item that is outside your view, the Browser's Window doesn't follow it down, allowing the selection to keep &quot;going down&quot; this list, but the user isn't able to see the other selected items.</p>
  <p>I've tried messing around with the focus() function, but I don't know how to focus() a specific item without using the ref atribute, which I also can't seem to implement since it's being generated with v-for.
  Here's my current table:</p>
  <pre><code>&lt;table class=&quot;table table-striped p-0 m-0&quot; v-show=&quot;pedidos.length &gt; 0&quot;&gt;
              &lt;thead class=&quot;table-dark&quot;&gt;
                  &lt;tr class=&quot;&quot;&gt;
                      &lt;th&gt;Cliente Emissor&lt;/th&gt;
                      &lt;th&gt;Produto&lt;/th&gt;
                      &lt;!-- &lt;th&gt;Endereço&lt;/th&gt; --&gt;
                      &lt;!-- &lt;th&gt;Valor&lt;/th&gt; --&gt;
                      &lt;th&gt;Data Emissão&lt;/th&gt;
                      &lt;th&gt;Estado&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;template v-for=&quot;(pedido, index) in pedidos&quot;&gt;
                      &lt;itemPedido  :pedido=&quot;pedido&quot; :key=&quot;index&quot; :endereco=&quot;endereco&quot; :class=&quot;[(navegacaoAtual == index) ? 'teste' : '']&quot; ref=&quot;teste&quot;&gt;&lt;/itemPedido&gt;
                      &lt;itemEdit @atualizarListaPedidos=&quot;atualizarListaPedidos&quot; @atualizarStatusModal=&quot;atualizarStatusModal&quot; class=&quot;animation-dropdown&quot; :pedido=&quot;pedido&quot; :key=&quot;pedido.nome&quot;&gt;&lt;/itemEdit&gt;
                  &lt;/template&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  <p>Here's the current navigateWithArrows() function I've made:</p>
  <pre><code>navegarSetas(key) {
          if (this.navegacaoSetasAtiva == false) {
              this.navegacaoSetasAtiva = true
              this.navegacaoAtual = 0
          } else if (this.modalAtivado == false &amp;&amp; this.navegacaoSetasAtiva == true) {
              if (key == 'ArrowDown' &amp;&amp; this.navegacaoAtual &lt; this.pedidos.length - 1) {
                  this.navegacaoAtual++
                  Vue.nextTick().then(() =&gt; {
                      let teste1 = this.$refs.teste[this.navegacaoAtual]
                      teste1.$el.focus()
                  })
              } else if (key == 'ArrowUp' &amp;&amp; this.navegacaoAtual &lt;= this.pedidos.length &amp;&amp; this.navegacaoAtual &gt; 0) {
                  this.navegacaoAtual--
              } else if (key == 'Enter') {
                  let pedidoSelecionado = this.pedidos[this.navegacaoAtual].id
                  Event.$emit('changeShow', pedidoSelecionado)
              }
          }
      },
  </code></pre>
  <p>All help is appreciated. Thank you!</p>