我試圖從通過 vuejs 中的 api 獲得的資料中獲取隨機 id。然后我正在嘗試創建這樣的代碼。
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();
}
樣本資料
[
{
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"
},
]
但什么也沒發生。我想用這樣的樣本資料獲得隨機 id。像這樣的示例輸出。[ { id: 3 }, { id: 1 }, { id: 5 } ]。
uj5u.com熱心網友回復：
您正在呼叫已安裝的 API 呼叫方法，并從已創建的播放次數最多的串列中生成隨機串列。但是根據這里給出的 vue 的生命周期圖，您可以看到創建的鉤子是先出現的，然后是掛載的鉤子。這樣你就可以在一個空的最常播放的陣列上創建隨機串列。
作為解決方案getMostPlayed，在 API 回應后呼叫createdrandomItem 內部的方法和內部的方法getMostPlayed。
像這樣的事情：
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)];
}
}
如果您想擁有多個隨機元素，請參閱此問題的答案，因為當前的邏輯是從陣列中獲取單個隨機元素：從陣列中獲取多個隨機元素
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370452.html
上一篇：如何遍歷組件名稱？
下一篇：Vue.js單選按鈕沒有反應