Verschachtelte arrays von Objekten und v-für

Gut, dieses problem hat mich ratlos... Hatte ein wenig Mühe, geschachtelte for-Schleife, bis die Daten angezeigt werden:

<div v-if = "private.folders!=null" v-for="folder in private.folders">
{{folder.name}}
    <div v-for="check in folder.checks">
        {{check.name}}
    </div>
</div>

Und dann die Daten, die ich versuche zu verwenden, sieht wie folgt aus:

folders [Array]
-object [this is a single 'folder']
--name
--checks [array] [each folder has this array]
---[object] [the actual 'check' object]
----[name]

Die äußere Schleife funktioniert Prima, und gibt die Daten, die ich erwarte. Jedoch, zu überprüfen.Namen nichts zurückgibt, gibt es keine Fehler in der Konsole. Ist es möglich verschachtelte for-Schleifen wie diese?

InformationsquelleAutor mdobrenko | 2016-05-30
  1. 30

    Getestet habe ich Sie Vorlage, es funktioniert.

    JS:

     new Vue({
  el: '#sample',
  data: {
    private: {
      folders : [{
          name : 'folder1',
          checks : [
            { name : 'check1.1' },
            { name : 'check1.2' }
          ]
        },
        {
          name : 'folder2',
          checks : [
            { name : 'check2.1' },
            { name : 'check2.2' }
          ]
        }
      ]
    }
  }
})

    HTML:

    <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="sample">
  <div v-if = "private.folders!=null" v-for="folder in private.folders">
  {{folder.name}}
      <div v-for="check in folder.checks">
          {{check.name}}
      </div>
  </div>
</div>

    • es hat bei mir nicht funktioniert, obwohl ich verwendet, Tabelle und nicht div
    • wie der index (ohne reset) in geschachtelte?
    • Vermeiden Sie die Verwendung von v-und v-wenn Sie das gleiche element
    InformationsquelleAutor cyrilluce
  2. 0

    Dies ist, wie könnten Sie es einrichten mit HTML-Tabelle:

    JS:

    new Vue({
  el: '#sample',
  data: {
    private: {
      folders : [{
          name : 'folder1',
          checks : [
            { name : 'check1.1' },
            { name : 'check1.2' }
          ]
        },
        {
          name : 'folder2',
          checks : [
            { name : 'check2.1' },
            { name : 'check2.2' }
          ]
        }
      ]
    }
  }
})

    HTML:

    <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="sample">
<table>
  <tr>
    <th>Folder</th>
    <th>Checks</th>
    <th>Checks</th>
  </tr>
  <tr v-if = "private.folders!=null" v-for="folder in private.folders">
  <td><b>{{folder.name}}</b></td>
      <td v-for="check in folder.checks">
         {{check.name}}
      </td>
  </tr>
</table>
</div>

    • Sie sollen nicht bedingte Anzeige auf der gleichen Linie Ihr erklärt die v-für
    InformationsquelleAutor M. Str
Schreibe einen Kommentar