Data not rendering after route change

uselinux

I’m working on an article/blog page.
It consists of the article body and 4 related posts at the bottom.

When a related post is clicked I am updating the component’s data in beforeRouteUpdate by calling my Vuex actions.
The api request hits my server. The data is added to the store. So far, so good.
The article body updates.
The 4 related posts do not consistently update even when data is in the store.

Some of the time it works. Some of the time it does not. Am I dealing with a race condition of some kind?
When I console.log this.related I more often will see the related posts render. Which is kind of bizarre.

Any information is helpful, thanks.

// component
<template>
...
        <div class="col-6 offset-3 article-content" v-html="postContent"></div>
	<div class="col-10 offset-1">
		<p class="text-h3">People Also viewed</p>
		<div class="row q-col-gutter-md">
			<v-card
				v-for="(post, index) in postRelated"
				:key="index"
				:post="post"
				excerpt-on
				class="col-3"
			/>
		</div>
	</div>
...
</template>

<script>
...
created () {
        // Set slug value
	this.slug = this.$route.path.substr(1, this.$route.path.length - 2)
        // Update store with current post body
	this.setPostBySlug({
		sizeMap: this.sizeMap,
		slug: this.slug + '/'
	})
        // Update store with current post's related posts
	this.setRelatedPostsBySlug({
		sizeMap: this.sizeMap,
		slug: this.slug + '/'
	})
},
computed: {
	...mapGetters('articles', ['post', 'related']),
	postRelated () {
		return this.related[this.slug]
	},
        postContent () {
        	return (!this.post || !this.post.content) ? '' : this.post.content
        }
},
methods: {
	...mapActions('articles', ['setPostBySlug', 'setRelatedPostsBySlug'])
},
beforeRouteUpdate (to, from, next) {
	this.slug = to.path.substr(1, to.path.length - 2)
	this.setPostBySlug({
		sizeMap: this.sizeMap,
		slug: this.slug + '/'
	})
	this.setRelatedPostsBySlug({
		sizeMap: this.sizeMap,
		slug: this.slug + '/'
	})
	next()
}
...
</script>

uselinux

Little more information. If I check out my Vuex Store in Vue Dev tools and hit “Commit” for setRelatedPosts I immediately see my related cards come up.
I added console output to my mutation and it does indeed fire on initial data fetching. But I only have rendering after I commit manually.

I really don’t understand

uselinux

Well, I didn’t figure out a solution to the issue. I instead modified my structure so that I only ever store 1 set of related posts instead of organizing by the slug.
Seems to be working after that.

Kind of disappointing to dumb down the structure and to not know what the problem was.

dobbel

@uselinux

https://medium.com/@miladmeidanshahi/update-array-and-object-in-vuejs-a283983fe5ba

In Vue3 this nonsense will finally be over…

uselinux

@dobbel
Thank you so much for an explanation.

In my searches I did encounter Vue.set() without any real information about it as it relates to this. How would I access that within a component or mutation?

dobbel

@uselinux

How would I access that within a component or mutation?

in component :
this.$set() or this.set() (forgot)

in Vuex store:

import Vue from 'vue'
}

https://gist.github.com/DawidMyslak/2b046cca5959427e8fb5c1da45ef7748

uselinux

Much appreciated.