Add k and j keybinds for moving within the list.

This commit is contained in:
Lukáš Kucharczyk 2020-08-25 16:07:37 +02:00
parent 6d8c2f3215
commit 8d6be9c37f
1 changed files with 48 additions and 4 deletions

View File

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