[Vue]<li>をループで回してつくった箇条書きに、十字キーでフォーカスを合わせてる風の挙動をさせる

See the Pen [Vue]ループ処理したliタグの移動 by riotam (@riotam4) on CodePen.

挙動の確認方法は、見たまんまなので割愛します。 入力欄に調べたいものを入力した際、検索結果が下に現れるタイプの挙動（googleの予測変換みたいな感じ）を想定して作りました。  今回は、実際にフォーカスしているわけでなくて、CSSでそれらしいものをあてがっているだけです。 for文でリストをループしているものなのですが、各々にどうやって違うスタイルを適応するのか…という部分が、結構苦戦しました。

簡単なコードなので、ぜひ読んでみて下さい。
キモになる部分は、ここです。

HTML側3行目

<ul v-for="(v,k) in users">
    <li :class="{change:currentIndex === k}">{{ v }}</li>
</ul>

ループで生成されるリストタグ全てに、この:classを仕込み、currentIndex === kのリストだけ、changeクラスに変化させる。

JS側全部

  var vm = new Vue({
    el: '#app',
    data: {
        users: [ '太郎', '次郎', '三郎', '四郎', '五郎'],
        currentIndex : -1,
     },
    methods: {
      moveDown() {
        this.currentIndex = this.currentIndex + 1;
      },
      moveUp() { 
        if(this.currentIndex > -1){
          this.currentIndex = this.currentIndex - 1;  
        }
      },
    }
  });

currentIndexは初期値を-1に設定しておき、上下の矢印キーで発火する、moveDownメソッド、moveUpメソッドで、それぞれ1ずつ数値を変更させる。
数値の変更されたcurrentIndexは、usersを１つずつ取り出した際のキーにあたる「k」と比較され、同じものがあるところのみ、クラスが変更される仕組みです。

ループで生成されるリストタグの１つに、どうやってクラスをつけようか悩んだが、全部に動的変化をさせられるものを仕込めば良かったんだと勉強になりました。
今日はこれだけ。ありがとうございました。

続編

箇条書きから選んだ要素を取得する続編はこちら