使用v-for在vuetify中展示对象的值的尝试

Question

我正在Vue.js中构建一个函数，用户可以在数据库中选择一些表格，表格的列名应自动显示在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 // 第二个表格的列

但我希望第二个表格的列分别打印出来，而不是在同一行用逗号分隔。 我想要的结果是（不包括数字）：

1. id //第一列
2. name //第二列
3. 姓氏
4. 电子邮件

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

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

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