通过 slug 获取页面和页面数据。 Strapi 和 Nuxt答案

【问题标题】：Get page and page data by slug. Strapi and Nuxt通过 slug 获取页面和页面数据。 Strapi 和 Nuxt
【发布时间】：2020-08-17 08:39:23
【问题描述】：

我有 Strapi，还有 Nuxt 和 Apollo。

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

现在我得到一个这样的页面：

我对 product.gql 的查询

查询产品($slug: String) {
产品（其中：{ slug：$slug }）{
身份证
蛞蝓
名称
图片{
提供者元数据
}
说明
}
}

我的一个产品页面 _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() 中的输出？

【问题讨论】：

标签： vue.js graphql nuxt.js strapi

【解决方案1】：

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

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

【讨论】：