时间戳

首页 > 解决方案 > 仅在 nuxt 应用程序中使用 json 中的某些字段

vue.js - 仅在 nuxt 应用程序中使用 json 中的某些字段

问题描述

通过使用 asyncdata 和 axios，我从名为 Knack 的数据库中获取了一个 json 对象。

工作得很好，但是整个响应是巨大的，在某些页面中，我只使用了 50 多个字段中的 10 个字段。

所以我从诀窍中获取记录，然后使用 v-for 循环并从 200 条记录中输出 50 多个字段中的 10 个。

通过查看控制台，我可以看到整个 json 对象。

有没有办法像我一样获取 json 对象，而不是全部返回，循环并使用我需要的字段创建一个较小的对象并将其返回，然后在我的模板中执行 v-for？基本上导致只有必填字段在控制台和公众中可见？

如果有人可以帮助提供代码示例，非常感谢。

标签： vue.jsnuxt.js

解决方案

你可以这样做。

样本数据模型

 data() {
  return {
    // Required fields to filter data
    requiredFields: ["name", "phone", "email"],
    fields: {
      name: "Wade Mckenzie",
      phone: "1-278-483-8300",
      email: "ac.mattis.velit@magnisdisparturient.net",
      address: "971-2324 Id, Av.",
      list: 7,
      country: "Australia",
      postalZip: "422625",
      region: "Campania",
      text: "malesuada augue ut lacus. Nulla tincidunt, neque vitae semper egestas,",
      numberrange: 5,
      currency: "$9.91",
      alphanumeric: "TXQ00DEL5RP",
   },
  };
 }

计算道具

computed: {
  filteredData() {

    // Create an empty object
    let requiredData = {};

    // Loop over the entries
    for (const [key, value] of Object.entries(this.data)) {

      // Check if the property is a required field
      if (this.requiredFields.includes(key)) {
        requiredData[key] = value;
      }
    }
 
   return requiredData;
  },
}

模板

<div v-for="(value, name) in filteredData" :key="name">
  {{ name }}: {{ value }}
</div>

您可以查看工作示例。

推荐阅读