Render eine ausgewählte rekursiv in vue js

Question

Ich habe folgendes array in Vue.js:

epics: { 
     1: {'text' : 'Epic 1', 'value' : 1, 'children' : { 
       1: {'text' : 'Subepic 1', 'value' : 4}, 
       2: {'text' : 'Subepic 2', 'value' : 5}, 
       3: {'text' : 'Subepic 3', 'value' : 6}, 
      } 
     }, 
     2: {'text' : 'Epic 2', 'value' : 2}, 
     3: {'text' : 'Epic 3', 'value' : 3} 
    }, 

die eine n Ebene tief array sein kann.

Ich möchte eine Auswahl basierend darauf generieren, mit den untergeordneten Optionen unter der übergeordneten Option (rekursiv). Ich habe überall gesucht, kann aber kein Beispiel dafür finden, wie man das machen könnte. Können Sie mir bitte irgendwelche Tipps geben, wie man das macht?

Beispiel wollte select generiert:

<select> 
    <option>Epic 1</option> 
    <option>Subepic 1</option> 
    <option>Subepic 2</option> 
    <option>Subepic 3</option> 
    <option>Epic 2</option> 
    <option>Epic 3</option> 
<select> 

Vielen Dank!

Answer 1

Ihr epics "Array" ist eigentlich kein Array, es ist ein Objekt. Also zuerst würde ich es zu einem tatsächlichen Array ändern:

epics: [ 
    { 
     text: 'Epic 1', 
     value: 1, 
     children:[ 
      {text : 'Subepic 1', value : 4}, 
      {text : 'Subepic 2', value : 5}, 
      {text : 'Subepic 3', value : 6}, 
     ] 
    }, 
    { 
     text : 'Epic 2', 
     value : 2 
    }, 
    { 
     text : 'Epic 3', 
     value : 3 
    } 
], 

Beachten Sie die eckigen Klammern anstelle der geschweiften Klammern.

Dann können Sie eine berechnete Eigenschaft definieren, die eine Flatten Version von Ihnen Epen Array zurück:

computed: { 
    flatted: function() { 
     return this.flat(this.epics); 
    } 
}, 

methods: { 
    flat(items) { 
     var final = [] 
     var self = this 
     items.forEach(function(item) { 
      final.push(item) 

      if (typeof item.children !== 'undefined') { 
       final = final.concat(self.flat(item.children)); 
      } 
     }) 

     return final; 
    } 
} 

Die berechnete Eigenschaft wird die flache Methode aufrufen, die Ihr Array verarbeitet und eine neue mit allen bauen die Kinder auf der obersten Ebene.

Immer wenn Sie das epics-Array ändern, wird das berechnete sich selbst aktualisieren und Ihnen eine abgeflachte Version davon geben.

In Ihrer Komponente können Sie eine v-for auf dieser berechneten Eigenschaft tun, und es wird die Auswahl machen, wie Sie wollen es:

<select> 
    <options v-for="item in flatted">{{item.text}}</option> 
</select> 

Wenn mit Vuejs arbeiten denken, mehr über Ihre Daten zu manipulieren, um die Bedürfnisse des Anzugs Komponente statt über irgendeine verrückte Logik in Ihrer Komponente/Ansicht nachzudenken.

Answer 2

Ich habe das gleiche Problem, aber ich möchte nicht die Daten abflachen, wie ich die Anzeige des Optionstextes einen bestimmten Betrag jeder Ebene einrücken möchte, so dass die Hierarchie visuell ersichtlich ist.

Ich denke, dass dies über eine rekursive Komponente erreicht werden kann, aber ich bin mir nicht ganz sicher, wie - ich versuchte, mit this fiddle herumspielen, konnte es aber nicht ganz zum Laufen bringen.

Grundsätzlich suche ich die folgende Struktur aus den verschachtelten Daten zu erreichen:

<select> 
    <option class="level-0">Epic 1</option> 
    <option class="level-1">Subepic 1</option> 
    <option class="level-1">Subepic 2</option> 
    <option class="level-1">Subepic 3</option> 
    <option class="level-0">Epic 2</option> 
    <option class="level-0">Epic 3</option> 
</select> 

Aber braucht es für eine variable Menge von verschachtelten Ebenen zu arbeiten. Irgendwelche Zeiger?