Percubaan untuk menggunakan v-for untuk memaparkan nilai objek dalam vuetify

Question

Saya sedang membina fungsi dalam Vue.js di mana pengguna boleh memilih beberapa jadual dalam pangkalan data dan nama lajur jadual hendaklah dipaparkan secara automatik dalam komponen item senarai-v. Masalahnya ialah saya tidak boleh mencetak nama lajur ini dengan cara yang baik.

Ini ialah kod yang saya gunakan:

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

<skrip>
  eksport lalai {
    data() {
      kembali {
        lajur:{},
      };
    },
  }
</script>

Untuk menjadikan kod kelihatan lebih bersih, saya tidak memasukkan kaedah dan pembolehubah lain.

Sebagai contoh, jika saya memilih 2 jadual dalam pangkalan data, satu dengan hanya 1 lajur dan satu lagi dengan 3 lajur, hasil yang saya dapat daripada kod ini ialah:

id //Lajur jadual pertama

nama, nama_keluarga, e-mel // Lajur jadual kedua

Tetapi saya mahu lajur jadual kedua dicetak secara berasingan dan tidak dipisahkan dengan koma dalam baris yang sama. Hasil yang saya mahukan ialah (tidak termasuk nombor):

1. id //Lajur pertama
2. nama //Lajur kedua
3. Nama akhir
4. E-mel

Ini adalah hasil yang saya dapat daripada permintaan axios:

[ [ "ID" ], [ "Nama", "nama keluarga", "e-mel" ] ]

Answer 1

Anda boleh menganggap dua tatasusunan ini sebagai senarai, dengan item sebagai item senarai

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