最近在寫 Vue 時遇到雙重迴圈的問題，這邊記錄一下，以免又忘記。
data() {
return {
parentList: [
{
childList: [
{ index: 1, childName: "第一個節點" },
{ index: 2, childName: "第一個節點" },
{ index: 3, childName: "第一個節點" },
],
},
{
childList: [
{ index: 6, childName: "第二個節點" },
{ index: 7, childName: "第二個節點" },
{ index: 8, childName: "第二個節點" },
],
},
],
};
}
<div v-for="(parent, index) in parentList" :key="index" class="boxArea">
<div
v-for="child in parent.childList"
:key="child.index"
class="box"
>
<h1>{{ child.childName }}</h1>
<div class="imageUrl"></div>
<div class="url"></div>
</div>
</div>
參考資料：Vue 多重迴圈寫法
2026 年後記
原筆記的資料欄位與模板名稱對不上，整理時統一為 parentList、childList 與 childName，但保留原本的兩層迴圈結構。實際資料若有穩定 ID，外層 key 也應優先使用 ID，不要使用索引。