Vue.js 2 Web Development Projects

Renaming the note

This first toolbar feature is also the easiest. It only consists of a text input bound to the title property of the selected note with the v-model directive.

In the toolbar div element we just created, add this input element with the v-model directive and a placeholder to inform the user of its function:

<input v-model="selectedNote.title" placeholder="Note title" />

You should have a functional rename field above the text editor and see the note name change automatically in the note list as you type:

Since we set the deep option on the notes watcher, the note list will be saved whenever you change the name of the selected ...