Quiero barajar una matriz y pasarla al componente. Funciona cuando se va directamente a la página con 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); },},
Todo funciona bien en nuxt-link. Pero cuando actualizo la página. La matriz se baraja 2 veces. 1 en SSR y el otro en el navegador. Entonces, mi componente carga datos de SSR shuffle y luego el componente se procesa nuevamente con el navegador shuffle. En este escenario, el componente Final tiene un valor no coincidente de diferentes objetos.
Comportamiento extraño con los datos variables.
Con la ayuda de la respuesta de esta pregunta. Intenté obtener datos en el método async Fetch () para que pueda funcionar tanto en SSR como en el navegador.
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); },Y funcionó.