## 本节说明
* 对应视频教程第 37 小节:A New Reply Vue Component
## 本节内容
本节我们将添加回复的区域抽取成 Vue 组件。首先新建组件:
*forum\resources\assets\js\components\NewReply.vue*
```
```
> 注意:以上的`post`提交路径为`endpoint:'/threads/atque/5/replies`,为了方便快速完成功能而暂时写死,稍后进行完善。你的路径与以上所示路径会有不同。
注释掉视图相应区域:
*forum\resources\views\threads\show.blade.php*
```
.
.
{{--@foreach ($replies as $reply)--}}
{{--@include('threads.reply')--}}
{{--@endforeach--}}
{{--{{ $replies->links() }}--}}
{{--@if (auth()->check())--}}
{{--
--}}
{{--@else--}}
{{--请先登录,然后再发表回复
--}}
{{--@endif--}}
.
.
```
接下来在`Replies.vue`组件中引入:
*forum\resources\assets\js\components\Replies.vue*
```
```
我们点击`NewReply.vue`组件的提交按钮,触发`addReply`函数,然后我们提交回复,并触发`created`;`Replies.vue`父组件监听到`created`事件,触发`add`函数,并将新的回复添加到回复区域,重新渲染回复区域显示所有回复。但是要注意的是,我们发送的是`Ajax`请求,所以我们要修改一下控制器:
*forum\app\Http\Controllers\RepliesController.php*
```
.
.
public function store($channelId,Thread $thread)
{
$this->validate(request(),['body' => 'required']);
$reply = $thread->addReply([
'body' => request('body'),
'user_id' => auth()->id(),
]);
if(request()->expectsJson()){
return $reply->load('owner');
}
return back()->with('flash','Your reply has been left.');
}
.
.
```
> 注意:我们预加载了`owner`:`$reply->load('owner')`,因为我们的回复显示组件会使用到。
最后,我们修改一下`addReply`方法:
*forum\app\Thread.php*
```
.
.
public function addReply($reply)
{
return $this->replies()->create($reply);
}
.
.
```
我们来测试一下:
![file](https://cdn.learnku.com/uploads/images/201805/27/19192/1uwQontEJ6.gif?imageView2/2/w/1240/h/0)
注意一点,我们返回了`owner`,但是看一下`owner`有哪些信息:
![file](https://cdn.learnku.com/uploads/images/201805/28/19192/5Y2iWmYEDZ.png?imageView2/2/w/1240/h/0)
我们不想返回`email`,进行处理:
*forum\app\User.php*
```
.
.
protected $hidden = [
'password', 'remember_token','email'
];
.
.
```
![file](https://cdn.learnku.com/uploads/images/201805/28/19192/l1xuyYazm3.png?imageView2/2/w/1240/h/0)
接下来我们处理无权限用户提交回复的问题。现在我们的页面,未登录用户也能看到提交回复区域,我们需要进行修复:
*forum\resources\assets\js\components\NewReply.vue*
```
```
如果用户`signedIn`,才显示回复区域:
![file](https://cdn.learnku.com/uploads/images/201805/29/19192/9WdVp7dPWl.gif?imageView2/2/w/1240/h/0)
不要忘记,在之前为了方便,我们的`uri`是写死的,我们要进行修复:
*forum\resources\assets\js\components\Replies.vue*
```
.
.
```
*forum\resources\assets\js\components\NewReply.vue*
```
.
.
```
我们利用`location.pathname+'/replies'`拼接成我们需要的`uri`,并且在`NewReply.vue`组件的`props`属性中获取到`uri`。我们还剩下最后一件事情要做,那就是我们新增回复,回复数也应该加 1 。这很好解决,仿照我们删除回复即可:
*forum\resources\views\threads\show.blade.php*
```
.
.
.
.
```
*forum\resources\assets\js\components\Replies.vue*
```
```
我们最后来测试一下:
![file](https://cdn.learnku.com/uploads/images/201805/29/19192/EvqmAQvpkI.gif?imageView2/2/w/1240/h/0)