嵌套数组数据表 v-for vue js答案

【问题标题】：nested array datatables v-for vue js嵌套数组数据表 v-for vue js
【发布时间】：2021-09-13 04:31:25
【问题描述】：

为什么我不能在 vue 中用数据表显示嵌套数组中的数据？

我有这样的 API 数据响应

这是我的数据表的样子（我只是显示 tbody，因为在 tbody 中显示了我如何从 API 获取数据）

     <tbody>
        <tr
          v-for="(item, i) in items"
          :key="i"
          class="text-gray-700 border-b border-gray-200 last:border-b-0"
        >
          <td class="p-3 text-sm align-middle">
            {{ item.id }}
          </td>
          <td v-for="(field, col) in fields" :key="col" class="p-3 text-sm align-middle">
            <span>
              <span v-if="field.clickable">
                <a
                  href="#load-children"
                  @click.prevent="itemClicked(item)"
                >
                  {{ item[field.key] }}
                </a>
              </span>
              <span v-else>
                {{ item[field.key] }}
              </span>
            </span>
          </td>
          </td>
        </tr>
      </tbody>

这是我的数据表的脚本

<script>
import _ from "lodash";

export default {
  props: {
    items: { type: Array, required: true },
    fields: { type: Array, required: true },
  },
};
</script>

【问题讨论】：

标签： javascript vue.js nested

【解决方案1】：

如果我理解正确，您有一个数组，并且您想从“category.name”访问值。

在 JS 中，您不能使用这种语法访问子对象的属性。

const obj = {category: { name: 'some name'}};
console.log(obj['category.name']) // will not work it is looking for key 'category.name'

因为这确实希望您在 obj 中拥有密钥 category.name。它正在寻找类似的东西

const obj = {"category.name": 'some name'};

您可以使用lodash get 检索 category.name 的第一个解决方案。

或者您可以将您的代码重构为 {{ item[field.key].name }} 和字段以具有唯一的类别

更新：

我用showConent 方法更新了示例codesandbox，您可以在其中添加条件，具体取决于您必须返回该值的参数

【讨论】：

是的，我想像{{ item[field.key].name }} 那样重构我的代码，但我不知道该怎么做
首先在“datatable.fields”中将“category.name”更改为“category”。其次，我认为您可以执行类似 {{ item[field.key].name ||项目[field.key] }}。
如果我把“category.name”改成“category”，category栏的内容变成这样{ "id": 1, "name": "gbgb", "slug": "gbgb", "order": 0, "created_at": "01-07-2021 05:48:39" , "updated_at": "01-07-2021 05:48:39" }
是的，很好，现在您有了类别数据。现在在表格的正文中，您需要{{ item[field.key].name || item[field.key] }}。其中item[field.key].name 将涵盖类别用例，item[field.key] 将涵盖其他用例。
当我使用{{ item[field.key].name || item[field.key] }}时，响应数据为空（不仅在类别中，而且在标题和状态中