vue.js - 通过slug获取页面和页面数据。 Strapi 和 Nuxt

Question

我有 Strapi，Nuxt 和 Apollo。

I get data using a dynamic query, but I can’t apply this data for the title and meta description.

现在我得到这样的一页:

我对 product.gql 的查询

查询产品($slug:字符串){
产品(其中:{ 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() 中的输出？

Answer 1

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

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