我是 Vue JS 的新手，我正在嘗試使用他們提供的內容來遍歷 JSON 陣列，以根據共享物件 prop 值創建多個陣列。基于此 JSON：
{
fields: [
{
"group": "group1",
"label": "label1",
"value": "value1",
},
{
"group": "group1",
"label": "label2",
"value": "value2",
},
{
"group": "group2",
"label": "label3",
"value": "value3",
},
{
"group": "group2",
"label": "label4",
"value": "value4",
},
],
}
我需要為每個“組”創建不同的陣列，因此我需要為“group1”值創建一個不同的陣列，然后當回圈到達“group2”值時停止并創建一個包含所有第 2 組物件的新陣列。“組”值可以是任何東西，我不會提前知道它們。
我需要結束這個：
group1Fields: [
{
"group": "group1",
"label": "label1",
"value": "value1",
},
{
"group": "group1",
"label": "label2",
"value": "value2",
}
],
group2Fields: [
{
"group": "group2",
"label": "label3",
"value": "value3",
},
{
"group": "group2",
"label": "label4",
"value": "value4",
}
]
我目前正在研究陣列映射，甚至使用計算屬性或方法，如果有任何建議，我將不勝感激。
目前正在學習關于 Vue 回圈的 YouTube 頻道“LearnVue”。 https://www.youtube.com/c/LearnVue
uj5u.com熱心網友回復：
您可以使用filter：
const app = Vue.createApp({
data() {
return {
fields: [
{"group": "group1", "label": "label1", "value": "value1",},
{"group": "group1", "label": "label2", "value": "value2",},
{"group": "group2", "label": "label3", "value": "value3",},
{"group": "group2", "label": "label4", "value": "value4",},
],
grp: null
};
},
computed: {
groups() {
return [...new Set(this.fields.map(f => f.group))]
},
filteredGroups() {
return this.grp ? this.fields.filter(g => g.group === this.grp) : this.fields
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="(item, i) in groups" :key="i">
<button @click="grp = item">{{ item }}</button>
</div>
<ul>
<li v-for="(group, i) in filteredGroups" :key="i">
{{ group }}
</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/520860.html