现在我们可以再去添加一个删除笔记的功能 .. 在 app.js 里面，找到 Note 组件 .. 先在它的模板里添加一个删除小图标 .. 放在 extra 这个元素里面 ..

一组小 i .. 上面加上 right floated trash outline icon .. 再用一个 v-if ，让它只在打开笔记的时候显示 ..

给它绑定一个 click 事件，v-on:click .. 用 destroy 方法来处理 ..

在组件的 methods 里面，添加一个 destroy 方法 .. 里面可以触发一个自定义的事件 .. this.$emit .. 事件的名字是 destory .. 可以再带一条数据 .. this.entity.$loki ，就是文档的 id 号 ..

删除

在 Notes 组件里面，我们可以去删除笔记 .. 找到这个组件 .. 在它的模板里面，找到使用 note 组件的地方 .. 给它绑定一个 destroy 事件 .. 然后用 destroy 这个方法来处理 ..

在组件的 methods 里面，再去添加这个方法 .. 添加一个 destory ，它可以接收一个 id 参数 .. 这个 id 就是要删除掉的文档的 id 号 ..

我们可以先把要删除的文档从组件的 entities 里面删除掉 .. 添加一个 _entities .. 用一下 this.entities.filter .. 一个 entity 参数 .. 返回 entity 的 $loki 属性的值不等于 id 的项目 .. 就是返回除了要删除的文档以外的所有的项目

重新设置一下组件里的 entities 的值 .. 让它等于这个 _entities ...

从数据库中删除

下面我们需要再把要删除的文档从数据库里面去掉 .. 先用 loadCollection .. 得到 notes 这个集合 .. 接着再用一个 then .. 得到的是 collection ... 我们可以用一下集合的 remove 方法，要删除的是 $loki 的值等于 id 的文档 ..

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

预览

回到浏览器，再去测试一下 ..

打开一个笔记 ... 右下角会显示一个垃圾桶小图标 .. 这里可以再设置一下它的指针样式 .. 打开 style.css .. 设置一下 .trash.icon 的样式 .. 把 cursor 设置成 pointer ..

回到浏览器 .. 再打开一个笔记 .. 按一下这个垃圾桶小图标 .. 会触发 destory 事件， Notes 组件监听了这个事件，做的事就是把笔记从笔记列表里面删除掉 ...

刷新一下浏览器 ... 被删除的笔记从数据库里面也删除掉了 ..