An attempt to use v-for to display the value of an object in vuetify

Question

I'm building a function in Vue.js where the user can select some tables in the database and the table's column names should automatically be displayed in the v-list-item component. The problem is that I can't print these column names in a good way.

This is the code I used:

<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>
  export default {
    data() {
      return {
        columns:{},
      };
    },
  }
</script>

To make the code look cleaner, I have not included methods and other variables.

For example, if I select 2 tables in the database, one with only 1 column and the other with 3 columns, the result I get from this code is:

id //Column of the first table

name, last_name,email // Columns of the second table

But I want the columns of the second table to be printed separately and not separated by commas in the same row. The result I want is (not including numbers):

1. id //First column
2. name //Second column
3. Last name
4. Email

This is the result I get from the axios request:

[ [ "ID" ], [ "Name", "surname", "e-mail" ] ]

Answer 1

You can treat the two arrays as a list, with the items as list items

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