[VueJS] Injecter un composant dans un autre

Muxxable
Javascript

Bonjour,

J'utilise laravel côté serveur, j'aimerais lorsqu'un utilisateur ajoute un article, que je voit en temps réel cet article sur mon dashboard.

Pour le moment j'envoie bien et je reçois bien les évènements avec laravel echo server. La où je bloque, c'est au niveau du comment je fait pour lister tous mes articles et "ajouter une card" lorsqu'un nouvelle article est créer en bdd via l'évènement.

Ce que je fais

J'arrive bien à récupérer le contenu de l'évènement

<script>
    export default {
        data() {
            return {
                post: '',
            }
        },
        mounted(){
            Echo.channel('chan-post')
                .listen('PostEvent', (post) => {
                    console.log(post);
                    this.post = post.post
                })
        }
    }
</script>

Ce que je veux

J'aimerais pouvoir lister les un as côté des autres tous les articles

1 réponse

Pandazaur

Salut,

Je ne sais pas comment fonctionne ton listener, mais s'il se déclenche a chaque fois qu'un élément est ajouté dans ta base de donnée, dans ce cas tu devrais avoir post de type Array et a chaque fois que ton listener est déclenché, ajouter le post dans ton tableau.

<script>
    export default {
        data() {
            return {
                posts: ['mon post 1'],
            }
        },
        mounted(){
            Echo.channel('chan-post')
                .listen('PostEvent', (post) => {
                    console.log(post);
                    this.posts.push(post.post)
                    // ou alors this.posts = [...this.posts, post.post]
                })
        }
    }
</script>

Ainsi, dans ton template ton v-for qui itère sur tes posts, se mettra automatiquement à jour