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.
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.