This second feature is a bit more complicated because we need a new method:
- Add a button element after the rename text input:
<button @click="removeNote" title="Remove note"><i
class="material-icons">delete</i></button>
As you can see, we listen to the click event with the v-on shorthand (the @ character) that calls the removeNote method that we will create very soon. Also, we put an appropriate icon as the button content.
- Add a new removeNote method that asks the user for confirmation and then removes the currently selected note from the notes array using the splice standard array method:
removeNote () { if (this.selectedNote && confirm('Delete the note?')) { // Remove the note in the notes array const index = this.notes.indexOf(this.selectedNote) if (index !== -1) { this.notes.splice(index, 1) } } }
Now, if you try deleting the current note, you should note that the following three things happen:
- The note is removed from the note list on the left
- The text editor and the preview pane are hidden
- The note list has been saved according to the browser console