保存笔记

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在我们要想办法保存在编辑器里修改的笔记内容 .. 在这个 Editor 组件的 textarea 元素的上面,可以绑定一个 input 事件 .. 发生这个事件用组件里的 update 方法来处理 ..

在组件里添加一个 methods 属性,里面定义一个 update 方法 .. 在这个方法里我们可以触发一个自定义事件 .. 用一下 this.$emit .. 事件的名字是 update ..

监听

再找到 Note 组件 .. 在它的模板里面,用了 editor 组件的地方, 我们监听一下发生的 update 事件 .. v-on:update ,事件用 save 方法来处理 ..

在 Note 组件里再添加一个 methods 属性 ... 里面添加一个处理 update 事件的 save 这个方法 ..

在这个方法里可以把修改的内容存储在数据库里 .. 先用一下 loadCollection 得到数据库里的 notes 集合 .. 用一下 then .. 得到的是 collection .. 里面用一下 collection 的 update 方法,更新一下文档 .. 这个文档就是 this.entity ...

下面再用一下 db 的 saveDatabase 保存一下数据库 ..

预览

再去预览一下 ... 打开一个笔记 ... 输入点内容 .. 然后可以刷新一下页面 ... 在编辑器里对笔记做的修改仍然会在 .. 因为我们在编辑器里输入内容的时候,已经实时的把修改的内容存储在数据库里了 ..

保存笔记《 Vue.js:应用案例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点