0

我有一个关于何时创建新文章的事件。在另一个页面上，我正在监听这个事件（VueJs 和 Laravel Echo），然后将新创建的文章附加到文章列表（实际上是不移位的），然后响应式更新视图。但是，一篇文章的作者与users table. 我不断收到错误，Vue 不断崩溃，因为文章没有author属性。这是因为作者是一个关系。我尝试过放入事件本身$this->article->load('author')的__construct方法，并且load('author')在将文章发送到事件之前尝试过使用。两者都没有工作。我如何在事件中维护这种关系，以便它在广播中发送，进而允许 Vue 作为属性访问它？

模板：

<template>
    <div>
        <div class="article-preview-container" v-for="article in articles">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title"><a :href="article.slug">{{ article.title}}</a></h2>
                </div>
                <div class="panel-body">
                    <p class="lead">
                        <span class="glyphicon glyphicon-time"></span> {{ article.created_at }} |
                        <span class="glyphicon glyphicon-user"></span> {{ article.author.full_name }}
                    </p>
                    <div class="article-preview">
                        <img :src="article.main_image" :alt="article.title">
                        <p>{{ article.preview }}</p>
                    </div>
                </div>
            </div>
        </div>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" spinner="spiral">
            <span slot="no-more">
                There are no more articles to display :(
            </span>
        </infinite-loading>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        mounted() {
            Echo.channel('articles').listen('ArticleCreated', (event) => {
                console.log(event.article.author);
                this.articles.unshift(event.article);
            });
        },
        data() {
            return {
                articles: [],
                skip: 0,
            };
        },
        methods: {
            onInfinite() {
                axios.get('/articles/' + this.skip).then(function (response) {
                    if(response.data.length > 0) {
                        this.articles = this.articles.concat(response.data);
                        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');

                        if(response.data.length < 5) {
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        } else {
                            this.skip += 5;
                        }
                    } else {
                        this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }
                }.bind(this));
            },
        },
        components: {
            InfiniteLoading,
        },
    };
</script>

事件：

<?php

namespace App\Events;

use App\Article;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class ArticleCreated implements ShouldBroadcast {
    use InteractsWithSockets, SerializesModels;

    public $article;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Article $article) {
        $this->article = $article;
        //tried $this->article->load('author')
        //tried $this->article = $article->with('author')
        //tried loading author using just $this->article->author
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn() {
        return new Channel('articles');
    }
}
4

0 回答 0