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

Posted 2023-03-10

【中文标题】通过 slug 获取页面和页面数据。 Strapi 和 Nuxt

【英文标题】：Get page and page data by slug. Strapi and 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"
              
              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() 中的输出？

【参考方案1】：

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

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