如何使用v-for循環(huán)出多層嵌套？

如下例所示，有這樣一個(gè)結(jié)構(gòu)的對(duì)象，需要用v-for循環(huán)出來(lái)
結(jié)構(gòu)型如：(dl>(dt>dl2+dt>dl3))*4
對(duì)象型如：

 sheet: {
        firstList:{
          firstTitle: {
            value: '練習(xí)冊(cè)',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        },
         secondtList:{
          firstTitle: {
            value: '練習(xí)冊(cè)',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        },
         thirdList:{
          firstTitle: {
            value: '練習(xí)冊(cè)',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        },
         fourthtList:{
          firstTitle: {
            value: '練習(xí)冊(cè)',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        }

回答

編輯回答

短嘆

首先，先給你一個(gè)官方的鏈接地址： https://vuefe.cn/v2/guide/lis...

最后，雖然不知道你最終想循環(huán)成啥樣，我這兒就隨便寫(xiě)一個(gè)，你結(jié)合文檔參考試試(不知道對(duì)不對(duì)，大概是這么個(gè)意思)：

<div v-for="outerVal in sheet">  //sheet
    <div v-for="(middleVal,middleKey) in outerVal">  //List
            {{middleKey.value}}   //title的值
        <div v-for="innerVal in middleKey.course">  //Title
            {{innerVal}}  //課程值
        </div>
    </div>
</div>

2018年8月22日 22:27