Une tentative d'utiliser v-for pour afficher la valeur d'un objet dans vuetify

Question

Je construis une fonction dans Vue.js où l'utilisateur peut sélectionner certaines tables dans la base de données et les noms de colonnes des tables doivent être automatiquement affichés dans le composant v-list-item. Le problème est que je ne parviens pas à imprimer correctement ces noms de colonnes.

Voici le code que j'ai utilisé :

<v-list-item v-for="(item,index) in this.columns" :key="index">
  <v-list-item v-for="ved in item" :key="ved.id">
    <v-list-item-content>
      <v-list-item-title>{{ved}}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list-item>

<script>
  exporter par défaut {
    données() {
      retour {
        Colonnes:{},
      } ;
    },
  }
</script>

Pour rendre le code plus propre, je n'ai pas inclus de méthodes ni d'autres variables.

Par exemple, si je sélectionne 2 tables dans la base de données, une avec seulement 1 colonne et l'autre avec 3 colonnes, le résultat que j'obtiens de ce code est :

id //Colonne du premier tableau

name, last_name,email // Colonnes du deuxième tableau

Mais je souhaite que les colonnes du deuxième tableau soient imprimées séparément et non séparées par des virgules dans la même ligne. Le résultat que je veux est (chiffres non compris) :

1. id //Première colonne
2. name //Deuxième colonne
3. Nom
4. E-mail

Voici le résultat que j'obtiens de la requête axios :

[ [ "IDENTIFIANT" ], [ "Nom", "nom de famille", "e-mail" ] ]≪/p>

Answer 1

Vous pouvez considérer ces deux tableaux comme une liste, avec les éléments comme éléments de liste

<v-list v-for="(item, index) in columns" :key="index">
    <v-list-item v-for="ved in item" :key="ved.id">
      <v-list-item-content>
        <v-list-item-title>{{ ved }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
</v-list>