- Vue.js 2 Web Development Projects
- Guillaume Chau
- 183字
- 2021-07-02 22:34:28
Selecting a note
When a note is selected, it becomes the context of the middle and right panes of the app--the text editor modifies its content, and the preview pane displays its formatted markdown. Let's implement this behavior!
- Add a new data property called selectedId that will hold the ID of the selected note:
data () { return { content: localStorage.getItem('content') || 'You can write in
**markdown**', notes: [], // Id of the selected note selectedId: null, } },
We could have created a selectedNote property instead, holding the note object, but it would have made the saving logic more complex, with no benefit.
- We need a new method that will be called when we click on a note in the list to select ID. Let's call it selectNote:
methods: { ... selectNote (note) { this.selectedId = note.id }, }
- Like we did for the add note button, we will listen for the click event with the v-on directive on each note item in the list:
<p class="notes"> <p class="note" v-for="note of notes"
@click="selectNote(note)">{{note.title}}</p> </p>
Now, you should see the ;updated selectedId data property when you click on a note.
推薦閱讀
- HornetQ Messaging Developer’s Guide
- Android應用程序開發(fā)與典型案例
- PostgreSQL Cookbook
- Rust編程從入門到實戰(zhàn)
- Java游戲服務器架構(gòu)實戰(zhàn)
- Hadoop+Spark大數(shù)據(jù)分析實戰(zhàn)
- Mastering Kali Linux for Web Penetration Testing
- 微信公眾平臺開發(fā):從零基礎(chǔ)到ThinkPHP5高性能框架實踐
- JAVA程序設(shè)計實驗教程
- R Deep Learning Cookbook
- Python極簡講義:一本書入門數(shù)據(jù)分析與機器學習
- Machine Learning for OpenCV
- SQL Server on Linux
- JBoss AS 7 Development
- Mastering Node.js