我正在使用 vue 和 tailwind 撰寫一個小測驗應用程式，但這是我第一次做這樣的事情。我希望資料是隨機的，所以每次測驗看起來都不一樣。我正在訪問我的 json 檔案，如下所示：
<template>
<div id="app">
<ul>
<li v-for="user in users" :key="user.id">
{{user.name}}
</li>
</ul>
</div>
</template>
<script>
import usersData from "./users.json";
export default {
data() {
return {
users: usersData,
};
},
};
</script>
我想知道是否有一種快速簡便的方法可以從 json 檔案中輸出隨機值。為了清楚起見，我希望它仍然輸出 json 檔案中的所有“名稱”，但每次都以不同的順序輸出。如果我不清楚或需要提供更多資訊，請告訴我。提前致謝。
uj5u.com熱心網友回復：
你可以使用 loadash
https://lodash.com/docs/4.17.15#shuffle
const array = [
{ some: 1 },
{ some: 2 },
{ some: 3 },
{ some: 4 },
{ some: 5 },
{ some: 6 },
{ some: 7 },
];
console.log(_.shuffle(array));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
或像這樣嘗試。
console.log( [
{ some: 1 },
{ some: 2 },
{ some: 3 },
{ some: 4 },
{ some: 5 },
{ some: 6 },
{ some: 7 },
]
.sort( () => Math.random() - 0.5) );
所以在 vuejs 中創建一個計算屬性
<template>
<div id="app">
<ul>
<li v-for="user in randomUsers" :key="user.id">
{{user.name}}
</li>
</ul>
</div>
</template>
<script>
import usersData from "./users.json";
export default {
data() {
return {
users: usersData,
};
},
computed:{
randomUsers () {
usersData.sort(() => Math.random() - 0.5))
}
}
};
</script>
uj5u.com熱心網友回復：
為此，我們使用以下方法
html/vue 代碼
<template>
<div id="app">
<ul>
<li v-for="user in users" :key="user.id">
{{user.name}}
</li>
</ul>
</div>
</template>
JavaScript 代碼
<script>
import usersData from "./users.json";
export default {
data() {
return {
users: usersData,
};
},
computed:{
random(p) {
//try this shuffle function
for (
var j, x, i = p.length;
i;
j = Math.floor(Math.random() * i), x = p[--i], p[i] = p[j], p[j] = x
);
return p;
}
}
,
created(){
this.users=random(users)
}
};
</script>
uj5u.com熱心網友回復：
<div id="app">
<ul>
<li v-for="user in userDataRandomSort" :key="user.id">
{{user.name}}
</li>
</ul>
</div>
</template>
<script>
import usersData from "./users.json";
export default {
data() {
return {
users: usersData,
};
},
computed :{
userDataRandomSort(){
return this.usersData.sort((a, b) => 0.5 - Math.random())
}
}
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/478081.html