Tengo un componente vuejs que muestra una publicación y sus respuestas.
Cuando el usuario quiere ver la publicación, hace clic en el título de la publicación y abre la publicación en una ventana modal llamando al componente que obtiene los datos de la publicación y los representa.
Tengo este extraño problema de reactividad que es un poco difícil de explicar. Se explica mejor con un caso de uso.
Si hago referencia a la publicación en la plantilla (por ejemplo, {{post.comments}} , muestra toda la información para la publicación 2 sin problemas
PERO si hago referencia a this.post.comments en el bloque de script, está representando información de Post 1.
Entonces parece que los accesorios de la post sí se están actualizando, pero this.post parece hacer referencia a la primera publicación abierta, independientemente de si paso una nueva publicación como accesorios.
Si voy más allá y paso la Publicación 3 al componente... post hace referencia a la Publicación 3, pero esta this.post aún se completa con la Publicación 1.
Entonces, los accesorios se están actualizando, pero este alcance no se actualiza cada vez que recuerdo el componente con un nuevo accesorio que se está pasando.
Aquí está mi código vuejs (o la parte superior relevante de todos modos).
module.exports = { props: ['post'], data: function(){ return { userHasVoted: this.post.userHasVoted, votes: this.post.voters.length, showReply: false, replyPlaceholder: "Post reply here", reply: { comment_of: this.post._id, channel: this.post.channel, post: null, tags: [] }, tagify: null, showByIndex: null } }, methods: { .....Gracias de antemano por cualquier ayuda para desentrañar esto.
Encontrado el problema/solución.
Parece que aunque estaba vinculando el componente a una propiedad en el elemento principal, volver a cargar o cambiar la propiedad principal no vuelve a montar ni cambia el alcance local en el componente. Entonces, para evitar esto, necesitaba usar la tecla: al llamar al componente.
Así que esta fue mi llamada original al componente (pasando un objeto de publicación)
<post-item-full v-bind:post="post"></post-item-full>Todo lo que tenía que hacer era agregar la clave y pasar una clave única (en este caso, el _id del objeto que pasa... pero podría ser cualquier cosa única para la publicación.
<post-item-full v-bind:post="post" :key="post._id"></post-item-full>Y ahora trabajando encontrar.
No estoy seguro de si esta es la solución correcta, pero funciona sin demasiado alboroto.
Gracias a esta publicación por la solución: https://michaelnthiessen.com/force-re-render/