I have a component designed to showcase recipes in a list format. Each recipe is rendered using a separate component from an array of recipes. I am currently attempting to pass the recipe object from one component to another component using Router-Link
<RecipeCard
v-for="recipe in filteredRecipes"
:key="recipe.id"
:recipe="recipe"
/>
The RecipeCard component code snippet looks like this:
<template>
<div>
<router-link :to="{ path: 'recipe/' + recipe.id, props:{recipe} }">
<div>{{ recipe.title }}</div>
<p>
{{ recipe.description }}
</p>
</router-link>
</div>
</template>
To display more detailed information when a recipe card is clicked, the recipe should be passed to another component. Upon clicking the router-link, it leads to the following page:
<template>
<div>
<div>{{recipe.id}}</div>
</div>
</template>
<script>
export default {
name: 'PageViewRecipe',
props: {
recipe: {
type: Object,
required: true
}
},
data() {
return {
};
}
};
</script>
<style></style>
The recipe object contains additional details beyond what is displayed.
import Vue from "vue";
import Router from "vue-router";
import Home from "./pages/PageHome";
import AddRecipe from "./pages/PageAddRecipe.vue";
import PageViewRecipe from "./pages/PageViewRecipe.vue";
Vue.use(Router);
const router = new Router({
mode: "history",
routes: [
{
path: "/",
name: 'Home',
component: Home,
},
{
path: "/add-recipe",
name: 'AddRecipe',
component: AddRecipe,
},
{
path: "/recipe/:id",
name: 'ViewRecipe',
component: PageViewRecipe,
props: true
}
],
});
export default router;
Despite my efforts, I am encountering difficulties passing the prop to the final component. I have attempted using params, but so far no solution has worked.