将 API json 响应附加到 MetaInfo Vue js

Question

我有一个类似这样结构的元标记

  metaInfo () {
    return {
      title: 'my title',
      meta: [
        {
          name: 'description',
          content: 'my description'
        },
        {
          property: 'og:title',
          content: 'my title2'
        },
        {
          property: 'og:site-name',
          content: 'my site name'
        },
        {
          property: 'og:type',
          content: 'website'
        },
        {
          name: 'robots',
          content: 'index,follow'
        }
      ]
    }

  },

我想将我的 api 响应附加到我的元标记，但我不知道如何制作这样的数据

这是我的 API 响应

data: [{meta_tags_id: 3, meta_tags_properties: "my property", meta_tags_content: "my content"}]
0: {meta_tags_id: 3, meta_tags_properties: "my property", meta_tags_content: "my content"}
meta_tags_content: "my content"
meta_tags_id: 3
meta_tags_properties: "my property"
error: 0
message: "successfully get all meta tags"

这是预期的结果 { 财产：我的财产， 内容：我的内容 } 以及如何将我的 json 响应附加到我的元信息？

Answer 1

由于metaInfo 是一个返回object 的函数，因此将该对象收集到容器中，即metaInfoData。

映射您的data 数组并将其转换为所需格式，然后将其附加到metaInfoData.meta

const metaInfo = function () {
  return {
    title: "my title",
    meta: [
      {
        name: "description",
        content: "my description",
      },
      {
        property: "og:title",
        content: "my title2",
      },
      {
        property: "og:site-name",
        content: "my site name",
      },
      {
        property: "og:type",
        content: "website",
      },
      {
        name: "robots",
        content: "index,follow",
      },
    ],
  };
};

const data = [
  {
    meta_tags_id: 3,
    meta_tags_properties: "my property",
    meta_tags_content: "my content",
  },
];

const metaInfoData = metaInfo();
const convertedData = data.map((obj) => {
  const { meta_tags_properties, meta_tags_content } = obj;
  return {
    property: meta_tags_properties,
    content: meta_tags_content,
  };
});
metaInfoData.meta = [...metaInfoData.meta, ...convertedData];
console.log(metaInfoData);