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

Question

所以我正在使用 vue-meta 库将元标记添加到我的 vue 项目中，现在我正在尝试从 API 响应中添加我的元，这就是我从 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"
    }
]

Answer 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

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

Convert response.data.data from api to a structured object vue js

javascript

meta-tags

web

vue.js