Vue.js 2 Web Development Projects

Deleting the note

This second feature is a bit more complicated because we need a new method:

1. 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.

2. 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) ...