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

Question

我正在 vuejs 中构建一个函数，其中用户 select 数据库中的一些 tables 和 tables 的列名应该自动出现在 v-list 中-项目组件。问题是我无法很好地打印这些名称。

这是我正在使用的代码：

<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 个 table，其中一个只有 1 列，另一个有 3 列，我从这段代码得到的结果是：

id //column of the first table

name, last_name,email // columns of the second table

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

id //第一列
name //第二列
last_name
电子邮件

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

[ [ "id" ], [ "name", "last_name", "email" ] ]

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>

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

vuetify trying to display object's value with v-for

javascript

vue.js

vuejs2

vuetify.js