I am currently developing a function in vuejs that allows users to select tables from a database, with the columns' names automatically appearing in a v-list-item component. However, I am facing difficulty in displaying these column names effectively.
Here is the code snippet I am using:
<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>In order to keep the code clean, I have omitted the methods and other variables.
For instance, if I select 2 tables from the database where one table has only 1 column and the other has 3 columns, the current output from the code looks like this:
id //column of the first table
name, last_name, email // columns of the second table
However, I want the columns of the second table to be displayed separately instead of all in one line separated by commas. What I desire is as follows (without the numbers):
- id //first column
- name //second column
- last_name
This is what I receive from the axios request:
[ [ "id" ], [ "name", "last_name", "email" ] ]