So konvertieren Sie zweischichtige Objekte in Vue in Arrays (zwei Methoden)

Vue ist ein JavaScript-Framework für die schnelle Entwicklung von Webanwendungen. In Vue verwenden wir normalerweise Objekte für die Datenverwaltung, aber manchmal müssen wir die Eigenschaftswerte in einem Objekt in ein Array konvertieren, um unsere Durchquerung und Vorgänge zu erleichtern. In diesem Artikel werden zwei Methoden zum Konvertieren von zweischichtigen Objekten in Arrays in Vue vorgestellt.

Methode 1: Double Traversal verwenden

Double Traversal ist eine einfache Methode, die uns helfen kann, die Attributwerte in einem Objekt in ein Array umzuwandeln. Zuerst müssen wir die von Vue bereitgestellte v-for-Direktive verwenden, um alle Eigenschaften des Objekts zu durchlaufen. Führen Sie dann eine interne Iteration über das Objekt durch, das jeder Eigenschaft entspricht, und konvertieren Sie es in ein Array. Das Folgende ist ein Beispielcode:

<template>
  <div>
    <ul>
      <li v-for="(obj, index) in object" :key="index">
        {{ index }}
        <ul>
          <li v-for="(value, key) in obj" :key="key">
            {{ key }}: {{ value }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        'obj1': { 'key1': 1, 'key2': 2 },
        'obj2': { 'key3': 3, 'key4': 4 }
      },
      array: []
    }
  },

  methods: {
    convertObjectToArray() {
      Object.keys(this.object).forEach(key => {
        const obj = this.object[key]
        const objArray = Object.keys(obj).map((prop) => {
          return {
            [prop]: obj[prop]
          }
        })
        this.array = [...this.array, ...objArray]
      })
    }
  },
}
</script>

Im obigen Code verwenden wir zunächst die v-for-Anweisung, um jedes Attribut im Objektobjekt zu durchlaufen, und durchlaufen dann intern das jedem Attribut entsprechende Objekt. Dann verwenden wir die Methode Object.keys(), um den Schlüssel jedes Objekts abzurufen und ihn in ein Objekt umzuwandeln, das den Schlüssel und den Wert enthält. Schließlich fügen wir alle konvertierten Objekte einem Array hinzu, um den Zweck der Konvertierung von Objekten in Arrays zu erreichen. Sie können diese Methode in der Methode „convertObjectToArray()“ aufrufen, um ein Array bestehend aus Objekteigenschaftswerten in der Vue-Instanz abzurufen.

Methode 2: Verwenden Sie die lodash-Bibliothek

Wenn Sie mit der lodash-Bibliothek nicht vertraut sind: Es handelt sich um eine Open-Source-Bibliothek, die viele gängige Toolfunktionen für Javascript bereitstellt. Die Verwendung kann unsere Codeverarbeitung vereinfachen und die Menge unseres Codes reduzieren. In einer Vue-Anwendung können wir die Methode _.flatMapDeep() in der lodash-Bibliothek verwenden, um die Eigenschaften in einem Objekt in ein Array zu konvertieren.

Das Folgende ist ein Beispielcode, der die Lodash-Bibliothek verwendet:

<template>
  <div>
    <ul>
      <li v-for="(obj, index) in object" :key="index">
        {{ index }}
        <ul>
          <li v-for="(value, key) in obj" :key="key">
            {{ key }}: {{ value }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      object: {
        'obj1': { 'key1': 1, 'key2': 2 },
        'obj2': { 'key3': 3, 'key4': 4 }
      },
      array: []
    }
  },

  mounted() {
    this.array = _.flatMapDeep(this.object)
  }
}
</script>

Im obigen Code verwenden wir die importierte Lodash-Bibliothek und rufen die Methode _.flatMapDeep() in der Methode Mounted() auf. Diese Methode konvertiert alle Eigenschaftswerte im Objektobjekt in ein Array und speichert sie in der Array-Eigenschaft der Vue-Instanz.

Zusammenfassung:

In diesem Artikel werden zwei Methoden zum Konvertieren des Eigenschaftswerts eines Objekts in ein Array in einer Vue-Anwendung vorgestellt. Beide Methoden sind sehr einfach und leicht anzuwenden, aber wählen Sie die Implementierung entsprechend Ihren Bedürfnissen aus. Wenn Sie einen umfassenderen Beispielcode benötigen, können Sie sich das GitHub-Repository ansehen, indem Sie auf den untenstehenden Link klicken.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie zweischichtige Objekte in Vue in Arrays (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!