时间戳

首页 > 解决方案 > vuetify 尝试使用 v-for 显示对象的值

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

问题描述

我正在 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 // 第二个表的列

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

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

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

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

标签： javascriptvue.jsvuejs2vuetify.js

解决方案

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

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

推荐阅读