<p>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. </p> <p>Ini ialah kod yang saya gunakan: </p> <p> <pre class="brush:js;toolbar:false;"><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></pre> </p> <p>Untuk menjadikan kod kelihatan lebih bersih, saya tidak memasukkan kaedah dan pembolehubah lain. </p> <p>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: </p> <blockquote> <p>id //Lajur jadual pertama</p> </blockquote> <blockquote> <p>nama, nama_keluarga, e-mel // Lajur jadual kedua</p> </blockquote> <p>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): </p> <ol> <li>id //Lajur pertama</li> <li>nama //Lajur kedua</li> <li>Nama akhir</li> <li>E-mel</li> </ol> <p>Ini adalah hasil yang saya dapat daripada permintaan axios: </p> <blockquote> <p>[ [ "ID" ], [ "Nama", "nama keluarga", "e-mel" ] ]</p> </blockquote></p>

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