I want to shuffle an array and pass it to the component. It's working when going direct to the page with nuxt-link.
<template>
<div>
<CardsMetalCard :myCategory="myCategory" :catMetal="catMetal" />
</div>
</template>
computed: {
...mapGetters("design", {
designCategory: ["category"],
}),
myCategory() {
var result = this.designCategory.find((i) => i.url === this.category);
this.catMetal = result.metal;
var newRelatedArray = this.designCategory.filter(
(i) =>
i.metal === result.metal
);
// Shuffle is method to sort array and I console.log(array) before return in shuffle
return this.shuffle(newRelatedArray);
},
},
Everything works fine in nuxt-link. But when I refresh the page. Array gets shuffled 2 times. 1 in SSR and the other in the browser. So my component loads data from SSR shuffle and then the component renders again with browser shuffle. In this scenario, the Final component has a mismatched value from different objects.
Weird behavior with the variable data
With help from This question's answer. I tried getting data in async Fetch() method so it can work on Both SSR and browser.
async fetch() {
var designCategory = await this.$store.getters["design/category"];
var result = designCategory.find((i) => i.url === this.category);
this.catMetal = result.metal;
var newRelatedArray = designCategory.filter(
(i) => i.metal === result.metal
);
this.myCategory = this.shuffle(newRelatedArray);
},
And it worked.