<p>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. </p> <p>This is the code I used: </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-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></pre> </p> <p>To make the code look cleaner, I have not included methods and other variables. </p> <p>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: </p> <blockquote> <p>id //Column of the first table</p> </blockquote> <blockquote> <p>name, last_name,email // Columns of the second table</p> </blockquote> <p>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): </p> <ol> <li>id //First column</li> <li>name //Second column</li> <li>Last name</li> <li>Email</li> </ol> <p>This is the result I get from the axios request: </p> <blockquote> <p>[ [ "ID" ], [ "Name", "surname", "e-mail" ] ]</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>