I have a ProjectCard component which, among other things, links to a specific ProjectPage component. The ProjectPage is going to have a bunch of different paragraphs, pictures and so on, not wholly relevant for my question.
How do I pass on props to a ProjectPage? The Vue Docs portion on Boolean Mode is incredibly vague and doesn't really tell me anything useful.
My Router index.js file has the prop decoupling that they mention in the docs
import ProjectPage from "@/views/ProjectPage.vue"
const routes = [
{
path: "projects/:id",
component: ProjectPage,
props: true
}
To test things out, I made the ProjectPage.vue component look like this
<template>
<div>Static text, followed by {{ testString }}</div>
</template>
<script>
export default {
name: "ProjectPage",
props: {
testString: String
}
};
</script>
And I tried passing on a test string to it from my ProjectCard component like this:
<template>
<router-link class="project-link" :to="{ path: `projects/${url}`, params: { testString: 'a dynamic string' } }" exact>
</template>
<script>
export default {
name: "ProjectCard",
props: {
url: String
}
};
</script>
This will correctly take me to the specified route, eg projects/table. However, the {{ testString }} doesn't render and I can only see the Static text, followed by a portion of the component. There's no errors or warnings in the console.
Checking a ProjectCard component in the Vue debugger, the testString exists nested under to/params/testString:
However, on any of the ProjectPage components, testString is undefined
What am I doing wrong here?
