Comment convertir des objets à deux couches en tableaux dans vue (deux méthodes)

Vue est un framework JavaScript pour le développement rapide d'applications Web. Dans Vue, nous utilisons généralement des objets pour la gestion des données, mais nous devons parfois convertir les valeurs de propriété d'un objet en un tableau pour faciliter notre parcours et nos opérations. Cet article présentera deux méthodes pour convertir des objets à deux couches en tableaux dans Vue.

Méthode 1 : Utiliser le double parcours

Le double parcours est une méthode simple qui peut nous aider à convertir les valeurs d'attribut​​d'un objet en un tableau. Tout d'abord, nous devons utiliser la directive v-for fournie par Vue pour parcourir toutes les propriétés de l'objet. Ensuite, parcourez en interne l’objet correspondant à chaque propriété et convertissez-le en tableau. Voici un exemple de code :

<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>

Dans le code ci-dessus, nous utilisons d'abord l'instruction v-for pour parcourir chaque attribut dans l'objet objet, et parcourons en interne l'objet correspondant à chaque attribut. Ensuite, nous utilisons la méthode Object.keys() pour obtenir la clé de chaque objet et la convertir en un objet contenant la clé et la valeur. Enfin, nous ajoutons tous les objets convertis à un tableau pour atteindre l'objectif de convertir les objets en tableaux. Vous pouvez appeler cette méthode dans la méthode convertObjectToArray() pour obtenir un tableau composé de valeurs de propriétés d'objet dans l'instance Vue.

Méthode 2 : Utilisez la bibliothèque lodash

Si vous n'êtes pas familier avec la bibliothèque lodash, il s'agit d'une bibliothèque open source qui fournit de nombreuses fonctions d'outils courantes pour Javascript. Son utilisation peut simplifier notre traitement du code et réduire la quantité de notre code. Dans une application Vue, nous pouvons utiliser la méthode _.flatMapDeep() dans la bibliothèque lodash pour convertir les propriétés d'un objet en tableau.

Ce qui suit est un exemple de code utilisant la bibliothèque lodash :

<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>

Dans le code ci-dessus, nous utilisons la bibliothèque lodash importée et appelons la méthode _.flatMapDeep() dans la méthode Mounted(). Cette méthode convertit toutes les valeurs de propriété de l'objet objet en un tableau et les stocke dans la propriété array de l'instance Vue.

Résumé :

Cet article présente deux méthodes pour convertir la valeur de propriété d'un objet en tableau dans une application Vue. Les deux méthodes sont très simples et faciles à utiliser, mais choisissez la mise en œuvre en fonction de vos besoins. Si vous avez besoin d'un exemple de code plus complet, vous pouvez consulter le référentiel GitHub en cliquant sur le lien ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!