## 本节说明 * 对应视频教程第 33 小节:Ajaxifying the Delete Reply Button ## 本节内容 本节我们来实现 Ajax 删除回复。首先更改视图: *forum\resources\views\threads\reply.blade.php* ``` . . @can('update',$reply)
@endcan . . ``` 可以看到我们定义了一个`destroy`方法,现在我们新增此方法: *forum\resources\assets\js\components\Reply.vue* ``` . . methods:{ update() { axios.patch('/replies/' + this.attributes.id,{ body:this.body }); this.editing = false; flash('Updated!'); }, destroy() { axios.delete('/replies/' + this.attributes.id); flash('Your reply has been deleted!'); } } . . ``` 我们还需要修改控制器的`destroy`方法: *forum\app\Http\Controllers\RepliesController.php* ``` . . public function destroy(Reply $reply) { $this->authorize('update',$reply); $reply->delete(); if (request()->expectsJson()){ return response(['status' => 'Reply deleted']); } return back(); } . . ``` 现在如果我们尝试删除: ![file](https://cdn.learnku.com/uploads/images/201805/23/19192/ueOg73Ft1e.png?imageView2/2/w/1240/h/0) 可以看到已经成功删除,但是我们要刷新页面才能看到效果: ![file](https://cdn.learnku.com/uploads/images/201805/23/19192/9GGXeiRzam.png?imageView2/2/w/1240/h/0) 我们编辑一下组件,当我们删除回复时,我们让被删除的回复区域隐藏: *forum\resources\assets\js\components\Reply.vue* ``` . . destroy() { axios.delete('/replies/' + this.attributes.id); $(this.$el).fadeOut(300, () => { flash('Your reply has been deleted!'); }); } . . ``` 编译后即可重新查看效果。