The current note

Now that we know which note is currently selected, we can replace the old content data property we created at the beginning. It would be very useful to have a computed property to easily access the selected note, so we will create one now:

1. Add a new computed property called selectedNote that returns the note with an ID that matches our selectedId property:

      computed: {
        ...

        selectedNote () {
          // We return the matching note with selectedId
          return this.notes.find(note => note.id === this.selectedId)
        },
      }

note => note.id === this.selectedId is an arrow function from the ES2015 JavaScript version. Here, it takes a note argument and returns the result of the note.id === this.selectedId expression.

We need to replace the old content data property with selectedNote.content in our code.

1. Start by modifying the editor in the template:

      <textarea v-model="selectedNote.content"></textarea>

1. Then, change the notePreview computed property to now use selectedNote:

      notePreview () {
        // Markdown rendered to HTML
        return this.selectedNote ? marked(this.selectedNote.content) :          
        ''
      },

Now, the text editor and the preview pane will display the selected note when you click on it in the list.

You can safely remove the content data property, its watcher, and the saveNote method, which are no longer used in the app.