Ein Versuch, v-for zu verwenden, um den Wert eines Objekts in vuetify anzuzeigen

Question

Ich baue eine Funktion in Vue.js, mit der der Benutzer einige Tabellen in der Datenbank auswählen kann und die Spaltennamen der Tabelle automatisch in der v-list-item-Komponente angezeigt werden sollen. Das Problem ist, dass ich diese Spaltennamen nicht gut drucken kann.

Das ist der Code, den ich verwendet habe:

<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>
  Standard exportieren {
    Daten() {
      zurückkehren {
        Säulen:{},
      };
    },
  }
</script>

Damit der Code übersichtlicher aussieht, habe ich keine Methoden und andere Variablen eingefügt.

Wenn ich beispielsweise zwei Tabellen in der Datenbank auswähle, eine mit nur einer Spalte und die andere mit drei Spalten, erhalte ich mit diesem Code das folgende Ergebnis:

id //Spalte der ersten Tabelle

name, last_name,email // Spalten der zweiten Tabelle

Aber ich möchte, dass die Spalten der zweiten Tabelle separat gedruckt werden und nicht durch Kommas in derselben Zeile getrennt werden. Das gewünschte Ergebnis ist (ohne Zahlen):

1. id //Erste Spalte
2. name //Zweite Spalte
3. Nachname
4. E-Mail

Dies ist das Ergebnis, das ich aus der Axios-Anfrage erhalte:

[ [ "AUSWEIS" ], [ "Name", "Nachname", "Email" ] ]

Answer 1

你可以将这两个数组视为一个列表，其中的项目视为列表项

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