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

はじめに

今日は続編ということで、サンプルだけサクッと共有します。

前回の記事

前回の記事からの続きになります。
まだ読まれていない方は、こちらからどうぞ。

今日のサンプルコード

See the Pen [Vue]ループ<li>のフォーカス移動+選択 by riotam (@riotam4) on CodePen.

サンプルコードのみですが、こちらです。 入力欄にフォーカスした状態で、下キーを押すと、その下の箇条書きのところを、フォーカスしているような挙動をします。 enterキーを押すと、ダイアログ画面でその要素を受け取り、出力します。