dynamic slug not populating the url with graphql and nuxt

Question

I am using Strapi, Graphql and Nuxt.js to get a list of projects and then display a single project based on the button that is clicked which should carry along a slug of the project name in route params.

The Graphql query looks like below and does work in playground if I pass along a slug in a variable.

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

Query Variables

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

the result is

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

In the projects page the button is

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

and in the Apollo query on the projects list page

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

what gets sent to the address bar is

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

if i type in the slug like

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

the error is missing parameter - its returning an array instead of an object

the single project query is

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

and in the _slug.vue

apollo: {
    project: {
        prefetch: true,
        query: projectQuery,
        variables () {
            return { slug: this.$route.params.slug }
        }
    }
}

Any insights would be appreciated!

Answer 1

so the issue was not binding the 'to' in the button - the colon was missing and changed {slug} to {projects.slug}

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

thanks to Jeffery Biles https://www.youtube.com/watch?v=NS0io3Z75GI&list=PLPwpWyfm6JACZm5kqu6p4s7XHXbAQ7fP-