I have a vuejs component which renders out a post and its replies.
When the user wants to view the post, they click on the post title and it opens post in a modal window by calling the component which gets the post data and renders it out.
I have this strange reactivity problem which is a bit difficult to explain. Best explained with a use case.
If I reference post in the template (e.g. {{post.comments}}, it is displaying all the information for Post 2 just fine
BUT if I reference this.post.comments in the script block it is rendering information from Post 1.
So it seems the post props itself is updating, but this.post seems to reference the first post opened regardless of if I pass a new post in as a props.
If I go further and pass Post 3 into the component.. post references Post 3, but this.post is still populated with Post 1.
So the props is updating, but this scope is not updating whenever I recall the component with a new props being passed in.
Here is my vuejs code (or top relevant part anyway).
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: {
.....
Thanks in advance for any assistance on unraveling this.
Found the problem / solution.
It appears that although I was binding the component to a property in the parent, reloading or changing the parent property does not remount or change the local scope in the component. So to get around this I needed to use the :key when calling the component.
So this was my original call to the component (passing in a post object)
<post-item-full v-bind:post="post"></post-item-full>
All I needed to do was add the key, and pass in a unique key (in this case the _id of the object passing in.. but could be anything unique to the post.
<post-item-full v-bind:post="post" :key="post._id"></post-item-full>
And now working find.
Not sure if this is the right solution, but works without too much fuss.
Thanks to this post for the solution: https://michaelnthiessen.com/force-re-render/