81.最佳回复（三）

TDD 构建 Laravel 论坛笔记 /

本系列文章为laracasts.com 的系列视频教程——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频， 支持正版 ；

视频源码地址：github.com/laracasts/Lets-Build-a-...；

本项目为一个 forum（论坛）项目，与本站的第二本实战教程《Laravel 教程 - Web 开发实战进阶》类似，可互相参照。

本节说明

对应视频教程第 81 小节：Remembering a Best Reply

本节内容

本节我们继续开发最佳回复的功能。上一节我们在前端实现了标记最佳回复，本节我们来发送数据到后端，并且在初始化所以回复时就标记出所有回复。首先我们绑定isBest属性：
forum\app\Reply.php

.
.
class Reply extends Model
{
    .
    .
    protected $appends = ['favoritesCount','isFavorited','isBest'];
    .
    .
    public function getIsBestAttribute()
    {
        return $this->isBest();
    }
}

然后我们修改Reply.vue组件：
forum\resources\assets\js\components\Reply.vue

<template>
    .
    .
</template>
<script>
        .
        .
        data() {
            return {
              editing: false,
              id: this.data.id,
              body: this.data.body,
              isBest: this.data.isBest,
              reply: this.data
            };
        },
        computed: {
            ago() {
              return moment(this.data.created_at).fromNow() + '...';
            }
        },

        created() {
          window.events.$on('best-reply-selected',id => {
             this.isBest = (id === this.id)
          });
        },

        methods:{
            .
            .
            markBestReply() {
                this.isBest = true;

                axios.post('/replies/' + this.data.id + '/best');

                window.events.$emit('best-reply-selected',this.data.id);
            }
        .
        .
</script>

我们在组件中监听了best-reply-selected事件：每次更新最佳回复时触发该事件，然后每个组件都会监听该组件，从而更新各自的isBest属性。我们来测试一下：
file