Add k and j keybinds for moving within the list.

src/components/NoteList.vue

@@ -6,22 +6,66 @@
     v-model="content"
     rows="10"
   ></textarea>
-  <div class="note" v-for="note in notes" :key="note.id">{{ note.text }}</div>
+  <div
+    class="note"
+    v-for="note in notes"
+    :key="note.id"
+    :class="{ selected: note.id === current }"
+  >
+    <span class="noteid">#{{ note.id }}</span
+    >{{ note.text }}
+  </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      notes: [{ id: 1, text: 'This is a note' }],
-      content: 'Start typing something…'
+      notes: [
+        { id: 0, text: 'This is a note' },
+        { id: 1, text: 'And another one.' }
+      ],
+      content: 'Start typing something…',
+      current: null
     }
   },
   methods: {
     addNote() {
-      this.notes.push({ id: 2, text: this.content })
+      this.notes.push({ id: this.notes.length + 1, text: this.content })
       this.content = ''
     }
+  },
+  computed: {},
+  mounted() {
+    document.addEventListener('keyup', e => {
+      console.log(e.code)
+      switch (e.code) {
+        case 'KeyJ':
+          // go down in the list, unless it's the last item
+          this.current =
+            this.current === null
+              ? 0
+              : this.notes[this.current + 1] === undefined
+              ? this.current
+              : this.current + 1
+          break
+        case 'KeyK':
+          // go up in the list, unless it's the first item
+          this.current =
+            this.current === null
+              ? 0
+              : this.notes[this.current - 1] === undefined
+              ? this.current
+              : this.current - 1
+          break
+        case 'Delete':
+          alert(`Delete note #${this.current}?`)
+          break
+
+        default:
+          break
+      }
+    })
   }
 }
 </script>