Vue implementiert rekursiv benutzerdefinierte Baumkomponenten

<Vorlage>
  <div>
      <ul>
          <item :modell='Daten'></item>
      </ul>
  </div>
</Vorlage>
 
<Skript>
Element aus „./item“ importieren
Standard exportieren {
    Komponenten: {
        Artikel
    },
    Daten(){
        zurückkehren {
            Daten:{
                Titel:"Ebene 1",
                Kinder:[
                    {
                        Titel:"Ebene 1-1",
                        Kinder:[
                            {
                                Titel:"Level 3 1-1-1",
                                Kinder:[
                                    {
                                        Titel:"Level 4 1-1-1-1",
                                        Kinder:[
                                            {
                                                Titel: „Level 5 1-1-1-1-1“
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },{
                        Titel: „Level 1-2“,
                        Kinder:[
                            {
                                Titel: „Level 3 1-2-1“
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</Skript>

<Vorlage>
  <li>
      <div @click="umschalten">
          {{model.title}}
          <span v-if="isFolder">[{{öffnen?'-':'+'}}]</span>
      </div>
      <ul v-show="öffnen" v-if="isFolder">
          <item v-for="(Kind,Index) in Modell.Kinder" :Modell='Kind' :Schlüssel='Index'></item>
      </ul>
  </li>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name: 'Artikel',
    Requisiten:{
        Modell:{
            Typ: Objekt,
            erforderlich: wahr
        }
    },
    Daten(){
        zurückkehren {
            offen:false
        }
    },
    berechnet:{
        istOrdner(){
           returniere dieses.Modell.Kinder && diese.Modell.Kinder.Länge>0
        }
    },
    Methoden:{
        umschalten(){
            wenn (dieser.istOrdner) dies.öffnen =!dieses.öffnen
        }
    }
}
</Skript>

<Vorlage>
  <div Klasse="Index">
      <Baum></Baum>
  </div>
</Vorlage>
 
<Skript>
    Baum importieren aus "@/components/tree"
    Komponenten: {
        Baum
    }
</Skript>