将 response.data.data 从 api 转换为结构化对象 vue js答案

【问题标题】：Convert response.data.data from api to a structured object vue js将 response.data.data 从 api 转换为结构化对象 vue js
【发布时间】：2021-07-17 05:24:24
【问题描述】：

所以我正在使用 vue-meta 库将元标记添加到我的 vue 项目中，现在我正在尝试从 API 响应中添加我的元，如果我做了 console.log(' response.data.data')

0:
meta_tags_content: "my content"
meta_tags_id: 3
meta_tags_properties: "my property"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get meta_tags_content: ƒ reactiveGetter()
set meta_tags_content: ƒ reactiveSetter(newVal)
get meta_tags_id: ƒ reactiveGetter()
set meta_tags_id: ƒ reactiveSetter(newVal)
get meta_tags_properties: ƒ reactiveGetter()
set meta_tags_properties: ƒ reactiveSetter(newVal)
__proto__: Object
1:
meta_tags_content: "content"
meta_tags_id: 4
meta_tags_properties: "title"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get meta_tags_content: ƒ reactiveGetter()
set meta_tags_content: ƒ reactiveSetter(newVal)
get meta_tags_id: ƒ reactiveGetter()
set meta_tags_id: ƒ reactiveSetter(newVal)
get meta_tags_properties: ƒ reactiveGetter()
set meta_tags_properties: ƒ reactiveSetter(newVal)
__proto__: Object
length: 2

我正在尝试将 meta_tags_content 和 meta_tags_properties 添加到我的 vue 元标记函数 (https://www.npmjs.com/package/vue-meta)，这是我的元标记函数

export default {
  name: 'App',
  metaInfo () {
    return {
      title: 'Tiarapot',
      meta: [
        {
          name: 'description',
          content: 'Memang canggih (harus ganti)'
        },
        {
          property: 'og:title',
          content: 'Website Tiarapot (harus ganti)'
        },
        {
          property: 'og:site-name',
          content: 'Tiarapot'
        },
        {
          property: 'og:type',
          content: 'website'
        },
        {
          name: 'robots',
          content: 'index,follow'
        }
      ]
    }
  },
}

而我想做的就是让它变成这样

export default {
  name: 'App',
  metaInfo () {
    return {
      title: 'Tiarapot',
      meta: arrayOfConvertedresponse
    }
  },
}

如何将数组的响应转换为元结构化对象？

如果我的 console.log(arrayOfConvertedresponse) 是预期的结果

[
    {
    property: "my properties",
    content: "my content"
    },
    {
    property: "title",
    content: "content"
    }
]

【问题讨论】：

您在问题顶部记录的内容似乎是 Vue observable。您能否记录从您的 API 接收到的数据结构？像console.log(JSON.stringify(response.data, null, 2)) 这样的东西应该看起来更好
您的元数据包含名称和属性作为属性。那么你想要一个只告诉你要放置的属性名称的解决方案吗？在您的情况下，类似于 Open Graph 的普通标签和属性的名称？

标签： javascript vue.js web meta-tags

【解决方案1】：

如果您想在 metaInfo 中使用响应式数据，您需要将数组分配给 data 属性并在 metaInfo 函数中引用它

export default {
  name: 'App',
  data: () => ({
    arrayOfConvertedresponse: [] // define initial properties
  }),
  metaInfo () {
    return {
      title: 'Tiarapot',
      meta: this.arrayOfConvertedresponse
    }
  },
  async created () {
    // load data from the API
    const response = await axios.get("/api/meta-tags")

    // map response to the appropriate format and assign to your data property
    this.arrayOfConvertedresponse = response.data.data.map(meta => ({
      property: meta.meta_tags_properties,
      content: meta.meta_tags_content
    }))
  }
}

见https://vue-meta.nuxtjs.org/faq/async-action.html

【讨论】：