Estoy tratando de obtener una identificación aleatoria de los datos obtenidos a través de una API en vuejs. Entonces estoy tratando de crear un código como este.
data() { return { mostPlayed: [], randomData: [], } }, created() { this.randomData = this.randomItem(this.mostPlayed); }, methods: { async getMostPlayed() { try { const response = await axios.get(url); const data = response.data.slice(0, 9); this.mostPlayed = data; } catch (error) { console.log(error); }, randomItem (items) { return items[Math.floor(Math.random() * items.length)]; } }, mounted() { this.getMostPlayed(); }Data de muestra
[ { id: 1 title: "Forza Horizon 5" }, { id: 2 title: "Apex Legends" }, { id: 3 title: "Battlefield 2042" }, { id: 4 title: "Fortnite" }, { id: 5 title: "Genshin Impact" }, ]Pero nada pasó. Quiero obtener una identificación aleatoria con datos de muestra como ese. Ejemplo de salida como esta. [ { identificación: 3 }, { identificación: 1 }, { identificación: 5 } ].
Está llamando al método para la llamada API montada y generando la lista aleatoria a partir de la lista más reproducida creada. Pero según el diagrama del ciclo de vida de vue dado aquí , puede ver que el gancho creado viene primero y luego el gancho montado. Entonces, de esa manera, está creando una lista aleatoria en una matriz vacía más reproducida.
Como solución, llame al método getMostPlayed dentro del método created y randomItem dentro de getMostPlayed después de la respuesta de la API.
Algo como esto :
data() { return { mostPlayed: [], randomData: [], } }, created() { this.getMostPlayed(); }, methods: { async getMostPlayed() { try { const response = await axios.get(url); const data = response.data.slice(0, 9); this.mostPlayed = data; this.randomData = this.randomItem(this.mostPlayed); } catch (error) { console.log(error); }, randomItem (items) { return items[Math.floor(Math.random() * items.length)]; } }Consulte las respuestas a esta pregunta si desea tener varios elementos aleatorios, ya que la lógica actual es obtener un solo elemento aleatorio de una matriz: Obtenga múltiples elementos aleatorios de una matriz