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

【问题标题】：vuetify trying to display object's value with v-forvuetify 尝试使用 v-for 显示对象的值
【发布时间】：2021-07-11 15:32:19
【问题描述】：

我正在 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>

为了使代码看起来更简洁，我没有包含方法和其他变量。

例如，如果我在数据库中选择 2 个表，其中一个只有 1 列，而另一个有 3 列，我从这段代码得到的结果是：

id //第一个表的列

name, last_name,email // 第二个表的列

但我希望单独打印第二个表的列，而不是在同一行中用逗号分隔。我想要的是（没有数字）：

id //第一列
名称 //第二列
姓氏
电子邮件

这是我从 axios 请求中得到的：

[ [ “ID” ], [ “姓名”， “姓”， “电子邮件” ] ]

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

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

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

【讨论】：