Menu

81.最佳回复(三)

本节说明

  • 对应视频教程第 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

本文章首发在 Laravel China 社区
上一篇 下一篇
讨论数量: 0
发起讨论


暂无话题~
刻意练习,每日精进。
2
点赞
64
浏览
0
讨论

维护者