Question

我有Strapi，还有Nuxt和Apollo。

我使用动态查询获取数据，但无法将此数据应用于标题和元描述。

现在我得到这样的一页：

我对product.gql的查询

query Product（$ slug：String）{
产品（其中：{slug：$ slug}）{
id
弹头
名称
图片{
provider_metadata
}
说明
}
}

我的一种产品_slug.vue的页面页面

<template>
        <div
          class="flex flex-wrap pb-16"
          v-for="product in products"
          :key="product.slug"
        >
          <div v-if="product.image" class="w-1/2 flex items-center justify-center">
            <cld-image
              :publicId="product.image.provider_metadata.public_id"
              width="450"
              crop="scale"
            />
          </div>
          <div class="w-1/2">
            <p class="font-bold uppercase text-2xl pb-4">
              {{ product.category.name }} «{{ product.name }}»
            </p>
            <div
              class="pb-4"
              v-if="product.description"
              v-html="$md.render(product.description)"
            ></div>
          </div>
        </div>
      </section>
    </template>

    <script>
    import productQuery from '@/apollo/queries/product/product'
    export default {
      data() {
        return {
          products: {},
          api_url: process.env.API_URL
        }
      },
      apollo: {
        products: {
          prefetch: true,
          query: productQuery,
          variables() {
            let params = this.$route.params
            return {
              slug: params.slug
            }
          }
        }
      },
      head() {
        return {
          // title: this.product.meta_title,
        }
      }
    }
    </script>

如何将此数据应用于head（）中的输出？

Answer 1

您还没有在任何地方定义“meta_title”，因此数据根本不存在。您需要向名为“meta_title”的内容模型添加一个简单的文本字段，并将其添加到您的查询中，以便您可以定义它需要的内容。那个，或者你干脆用

head() {
        return {
          // title: this.product.name
        }
      }

通过Slug获取页面和页面数据。 Strapi和Nuxt

1 个答案: