Is there a way to shuffle an array and then pass it to a component? It seems to work when accessing the page directly 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
);
// The shuffle method is used to sort the array before returning
return this.shuffle(newRelatedArray);
},
},
Everything seems to be functioning correctly with nuxt-link. However, upon refreshing the page, the array gets shuffled twice - once during SSR and then again in the browser. As a result, my component loads data from the server-side rendered shuffle and then renders again with the browser-generated shuffle. This leads to a discrepancy in the final component value due to mismatched objects.