动态子弹未使用graphql和nuxt填充网址

Question

我正在使用Strapi，Graphql和Nuxt.js来获取项目列表，然后根据所单击的按钮显示单个项目，该按钮应该在路径参数中带有项目名称。

Graphql查询如下所示，如果我在变量中传递一个子句，它确实可以在操场上工作。

query GetProject($slug: String!) {
  projects(where: {slug: $slug}) {
    id
    name
    slug
  }
}

查询变量

{
  "slug": "tunnel-to-new-york"
}

结果是

{
  "data": {
    "projects": [
      {
        "id": "5ea7904136a59018ac9ffb54",
        "name": "Tunnel to New York",
        "slug": "tunnel-to-new-york"
      }
    ]
  }
}

在项目页面中，按钮为

<v-btn to="/projects/`${slug}`">Model + Details</v-btn>

以及在项目列表页面上的Apollo查询中

apollo: {
    projects: {
      prefetch: true,
      query: projectsQuery,
      variables() {
        return { slug: this.$route.params.slug };
      }
    }
  },

发送到地址栏的是

http://localhost:3000/projects/%60$%7Bslug%7D%60

如果我像这样输入子弹

http://localhost:3000/projects/tunnel-to-new-york

错误缺少参数-它返回数组而不是对象

单个项目查询为

query GetProject($slug: String!) {  
projects(where: {slug: $slug}) {
    id
    name
    slug   } }

和_slug.vue中的>

apollo: {
    project: {
        prefetch: true,
        query: projectQuery,
        variables () {
            return { slug: this.$route.params.slug }
        }
    }
}
任何见解将不胜感激！

我正在使用Strapi，Graphql和Nuxt.js来获取项目列表，然后根据所单击的按钮显示单个项目，该按钮应在路径中带有项目名称……

Answer 1

因此问题未将按钮中的'to'绑定-冒号丢失并将{slug}更改为{projects.slug}