0

Tengo un sistema de comentarios recursivos (soporta anidacion infinita de comentarios), puedo generar un comentario perfectamente y elcomponente se refresca.Mi problema comienza cuando quiero hacer un comentario a otro comentario, este comentario se agrega correctamente a la base de datos y si refresco la pagina esta todo en su sitio, pero lo que estoy buscando es que se refresque como lo hace un comentario ordinario.No le encuentro la vuelta.

post.vue(padre principal) descripcion:En este componente tengo 2 componentes hijos que son comment-form y list

<template>
<div class="dos">
                <h1>Comentarios</h1>

                <comment-form @update:comments="comments = $event"></comment-form>

                <list :comments="comments" ></list>
                <infinite-loading @distance="1" @infinite="infiniteHandler" >
                    <div slot="no-more">llegaste al final</div>
                    <div slot="no-results">Sin resultados</div>
                </infinite-loading>
            </div>  
</template>
<script>
    export default {
        props:['id'],
        data() {
            return {
               post:[],
               comments:[],
               page: 0,
            }
        },
        mounted () {

        },

         methods: {

             infiniteHandler($state) {
               this.page++
                let url = 'api/comments/get/'+this.id+'?page='+this.page
                axios.get(url)
                .then(response => {
                   let comment = response.data.data
                    if(comment.length){
                        this.comments = this.comments.concat(comment)

                        $state.loaded()

                    }else{
                        $state.complete()
                    }
                })
            },
         }

    }
</script>

list.vue

<template>
<div> 
    <div v-for="comments in comments" :key="comments.id" >
        <item :comments="comments" ></item>
    </div>

</div>
</template>

<script>
export default {
    props:[
        "comments"
    ],
  } 
</script>

como ven list contiene al componente item item.vue se encarga de traer los datos del comentario junto al formulario y si este es un subcomentario le pasa la prop :comments="comments a su vez si este comentario tiene respuestas vuelve a llamar al list generando asi la recursividad.

item

<template>
<div> 

    <div class="comment">
        #{{comments.id}}
        <div v-if="comments.parent != null">
                parent_id = #{{comments.parent_id}}
                <p>{{comments.user.name}} > {{comments.parent.user.name}} </p>  
                <p>{{comments.comment}}</p>
        </div> 
        <div v-else>
             <p>{{comments.user.name}}</p>
             <p>{{comments.comment}}</p>
        </div>
        <comment-form :comments="comments" @update:comments="comments.allreplies = $event"></comment-form>
    </div>

    <div class="reply" v-if="comments.allreplies">

        <list :comments="comments.allreplies"></list>
    </div>

</div>

</template>

<script>

export default {

    props:[
        "comments", 
    ],

}
</script>

cuando tengo esta linea :

 <comment-form :comments="comments" @update:comments="comments.allreplies = $event"></comment-form>

comments.allreplies consigo que se refresque pero no me trae los datos como quiero. introducir la descripción de la imagen aquí por ultimo el formulario lo tengo asi ..

comment-form

<template>
    <form  method="POST" v-on:submit.prevent="response">
    <div v-if="comments != null">
        <input type="hidden" name="parent_id" v-model="comments.id">
    </div>

    <div class="form-group">
        <label for="comment">Comentario:</label>
        <textarea class="form-control" name="comment" id="comment" v-model="newResponse"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Responder</button>
</form>
</template>

<script>
export default {
    props:[
        "comments"
    ],
     data() {
            return {
               currentUser:document.querySelector("meta[name='user-id']").getAttribute('content'),
               errors:[],
               newResponse:'',
               parent_id:'',
               id :this.$route.fullPath.split("/")[1],

            }
        },
        methods:{
            response: function(){
                    var url = 'api/comments/store';
                    axios.post(url,{
                        comment:this.newResponse,
                        parent_id:this.comments ? this.comments.id : '',
                        post_id:this.id,
                        user_id:this.currentUser,

                    }).then(response =>{

                        this.getComments()

                    }).catch(error => {
                        this.errors = error.response.data
                    })
                },
                getComments:function(){

                var url = 'api/comments/get/'+this.id;
                axios.get(url).then(response =>{

                     let newComment = this.comments;
                        newComment = response.data.data

                        console.log('form')
                        console.log(newComment)

                    this.$emit("update:comments", newComment);

                }).catch(error => {
                    this.errors = error.response.data
                })
        },



        },
}
</script>

lo que hago en el metodo getcomments* es reasignar la propiedad comments en **newComment que me llega del padre para enviar el nuevo array hacia el padre principal post.vue lo cual logro correctamente, pero al escribir un subcomentario no logro refrescarlos..

 getComments:function(){

                var url = 'api/comments/get/'+this.id;
                axios.get(url).then(response =>{

                     let newComment = this.comments;
                        newComment = response.data.data

                        console.log('form')
                        console.log(newComment)

                    this.$emit("update:comments", newComment);

                }).catch(error => {
                    this.errors = error.response.data
                })

dentro de item intente en

<comment-form :comments="comments" @update:comments="comments.allreplies = $event"></comment-form>

reemplazarlo por

<comment-form :comments="comments" @update:comments="comments = $event"></comment-form>

quitando el .replies pero recibo el error

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "comments"

found in

---> <Item> at resources/js/components/ItemComponent.vue
       <List> at resources/js/components/ListComponent.vue
         <Post> at resources/js/views/Post.vue
           <App> at resources/js/components/AppComponent.vue
             <Root>

alguna idea? pero no haberme enroscado mucho.. en resumen necesito que cuando escribo un comentario dentro de otro comentario este se muestre sin tner que refrescar la pagina.

3
  • Me mareo tanto codigo, pero a ver si podemos ponerlo mas claro.. vos le pasas una prop a un hijo.. y queres que cuando esa prop se actualice el hijo haga algo? donde esta el watch respectivo para eso?
    – gbianchi
    el 27 may. 2020 a las 15:25
  • empece esta semana a usar vue.. el watch deberia ponerlo en el componente item?
    – xDonYeyox
    el 27 may. 2020 a las 15:32
  • mira la documentacion... una vez que pasas una prop, no se actualiza automaticamente, necesitas decirle que la mire
    – gbianchi
    el 27 may. 2020 a las 15:36

1 respuesta 1

0

por fin logre resolverlo.... la solucion fue quitar this.$emit que emite directamente hacia el padre post.vue (cosa que no lograba nunca en un comentario anidado ya que itera entre item.vue y list.vue hasta que ya no haya mas subcomentarios y para ese momento el padre queda demasiado arriba como para refrescar el nuevo dato,esto es interpretacion mia), lo que tuve que hacer fue usar vuex y reemplazar en el formulario esto:

  axios.get(url).then(response =>{

                     let newComment = this.comments;
                        newComment = response.data.data


                    this.$emit("update:comments", newComment);
                    this.$emit("update:replies", newComment.allreplies);

                }).catch(error => {
                    this.errors = error.response.data
                })

por esto

  axios.get(url).then(response =>{

                     let newComment = this.comments;
                        newComment = response.data.data

                    this.$store.state.comments = newComment

                }).catch(error => {
                    this.errors = error.response.data
                })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.