vuetify尝试使用v-for显示对象的值

a64a0gku  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(432)

我正在vuejs中构建一个函数,用户在其中选择数据库中的一些表,这些表的列名应自动显示在v-list-item组件中。问题是我不能以一种好的方式打印这些名字。
这是我正在使用的代码:

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

为了使代码看起来更清晰,我没有包括方法和其他变量。
例如,如果我在db中选择了两个表,其中一个表只有1列,另一个表有3列,那么我从代码中得到的结果是:
id//第一个表的列
第二个表的名称、姓氏、电子邮件//列
但我希望第二个表的列单独打印,而不是在同一行中用逗号分隔。我想要的是(没有数字):
id//第一列
名称//第二列

电子邮件
这是我从axios请求中得到的:
[[“id”]、[“姓名”、“姓氏”、“电子邮件”]]

tcomlyy6

tcomlyy61#

您可以简单地将这两个数组视为一个列表,并将其中的项视为一个列表项

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

相关问题