时间戳

首页 > 解决方案 > 使用 vuetify 动态显示来自查询对象的某些列数据

vue.js - 使用 vuetify 动态显示来自查询对象的某些列数据

问题描述

我有一个返回 357 列的查询对象（例如，fullRecord）。对于我的 UI 的某个部分，我想查询其中大约 125 个项目的子集并将它们显示在列表中。我有我想在数组中显示的那些项目的列名（例如，colsWanted）。

我试图弄清楚如何动态迭代“colsWanted”数组并在 vuetify 界面中显示适当的“fullRecord.colsWanted(Item)”。我已经尝试过感觉像是一百万次不同的迭代，但这是最新的，它显示了一个错误：

    <v-flex v-for="(value, index) in colsWanted" :key="value">
      <v-card flat>
        <span v-if="fullRecord[value] in fullRecord">
          <strong>{{ index }}. {{ fullRecord[value] }}</strong>
        </span>
        <span v-else class="error--text">Not Available</span>
      </v-card>
    </v-flex>

实际上，我根本没有得到任何错误；但是当它们实际上应该返回结果时没有显示结果。

提前感谢您的任何帮助。

标签： vue.jsvuetify.jsnuxt.js

解决方案

您的对象键选择错误：

<span v-if="fullRecord[value] in fullRecord">

fullRecord[value]将检索value键的值，而不是in fullRecord.

你应该使用的是：

<span v-if="value in fullRecord">

或者

<span v-if="fullRecord.hasOwnProperty(value)">

我也将重命名value为，key因为它实际上就是这样。

推荐阅读