I'm new with Vue 3 router things, so really need help with it.
I'm trying to pass prop through the router link.
So, I have a component Post, where a prop post is an Object.
Post.vue
export default defineComponent({
name: 'Post',
props: {
post: {
type: Object as PropType<Post>,
required: true,
},
},
I have a component EditPostForm, where should be absolutely the same object as in the Post component.
EditPostForm.vue
export default defineComponent({
name: 'EditPostForm',
props: {
post: {
type: Object as PropType<Post>,
required: true,
},
},
And that's the router link in the Post component.
Post.vue
<router-link
class="..."
:to="{
path: '/post/edit',
props: post,
query: { post: post.id },
}"
>Edit
</router-link>
router/index.ts
{
path: '/post/edit',
name: 'Edit Post',
component: EditPostForm,
props: Object as PropType<Post>,
},
And an error I'm getting
Error
[Vue warn]: Missing required prop: "post"
at <EditPostForm fullPath="/post/edit?post=3" hash="" query= {post: "3"} ... >
at <RouterView>
at <App>
As far as I know, you cannot pass props directly using <router-link> , but you can set vue-router to pass the route params as props to the component:
{
path: '/post/edit/:prop1/:prop2/:prop3', // set your desired props as params in the url
name: 'Edit Post',
component: EditPostForm,
props: true, // set props to true, this will pass the url params as props
},
Then, in your template, you can specify params property within :to:
<router-link
class="..."
:to="{
path: '/post/edit',
params: post, // <-- changed 'props' to 'params'
query: { post: post.id },
}"
>Edit
</router-link>
Passing props can also be done via Object mode or Function mode, read more about them in the docs.
Object mode wouldn't be helpful, since that's mostly used for static props, but maybe you can use the Function mode if what I have provided above doesn't work for your use-case.
Related
I want to pass an object as a prop to another page via a router-link in Ionic-Vue.
Nothing appears to be being passed in when I click on the link that I've created.
This is the link that I'm using.
<router-link :to="{ name: 'movieInfo', params: { movieInfo: movie }}"><h2>{{movie.Name}}</h2></router-link>
Index.js
{
name: 'movieInfo',
path: 'movieinfo',
component: () => import('#/views/MovieInfoPage.vue'),
props: true
},
Props field within the movieInfo page
props:{
movieInfo:{
required: true
}
},
Is there something I'm doing wrong or should I handle this differently.
You have to declare in your routes that this route take props and you have to declare your path like this
path: '/movieinfo/:movieInfo',
movieInfo become a dynamic data and then you can pass it via router-link
I am passing params to a named route from a component:
<v-list-tile
:key="team.logo_url"
:to="{name: 'team', params: {
id: team.id,
name: team.name
}}"
avatar
>
The route is sett up likes so:
{
path: "/team",
name: "team",
component: TeamInfo,
props: {
id: true,
name: true
}
}
But the component does not render the props when referenced:
<template>
<v-container>
<p>{{ id }}</p>
</v-container>
</template>
<script>
import TeamService from '#/services/TeamService';
export default {
props: ['id', 'name'],
data: () => ({
players: [],
games: []
}),
mounted() {
console.log(this.id);
}
}
</script>
The log in the mounted method returns undefined.
However when I look in Vue dev-tools at the TeamInfo component I can see that both props are undefined but the params are populated.
I would like to be able to use the props in the component and also populate the URL with the team ID.
You have to use the boolean mode for to pass the params to both the URL and props. You also have to define the parameter inside the path to be able to access it. Here is an example that shows how to use it.
{
name: "team",
path: "/team/:id",
component: TeamInfo,
props: true,
}
https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode
i have a navbar and there is a text field in that the user can search for posts by tags. If the user enters 1-3 tags, the written tags will be stored in a tags array.
My router-link in the navbar component looks like this: (only relevant part)
<router-link :to="{name:'posts', props:{searchTags: tags}}">
<button type="button" v-if="this.tags.length > 0"
class="...">Search
</button>
</router-link>
in my routes.js is my posts route (important snippet of my routes.js)
routes: [
{
path: "/posts",
component: posts,
name: 'posts'
},
]
The navbar should send the tags array to the posts component. Unfortunately I can't do it.
The posts component, sends a post request to an API that gets the latest posts. But I want that when tags are passed, not the newest posts are fetched, only posts with certain tags. But first I have to get the tags somehow.
I tried to get them with "this.$props.searchTags" and other things. Unfortunately the result is always "undefined".
export default {
name: "posts",
props: {
searchTags: Array,
required: false
},
data: function () {
return {
apiUrl: '/getPosts',
....
tags: [this.searchTags],
}
},
methods: {
getPosts: function (url) {
this.$http.get(url).then(function (data) {
// blabla
});
},
getPostsByTags: function() {
//
},
},
created() {
if(this.$props.searchTags == null)
this.getPosts(this.apiUrl);
else
this.getPostsByTags(bla);
},
}
Router link to property accepts string or Location as a value. Location object does not have props property.
Instead, it is possible to use params to send data to route component:
<router-link
:to="{ name: 'posts', params: { searchTags: tags } }"
>
...
</router-link>
This way searchTags with value of assigned tags will be accessible via this.$route.params.searchTags inside destination component.
So created hook of example above should be updated to:
created () {
if (!this.$route.params.searchTags) {
this.getPosts(this.apiUrl);
} else {
this.getPostsByTags(bla);
}
},
Try to add props: true in your route definition
routes: [
{
path: "/posts",
component: posts,
name: 'posts',
props: true
},
]
I have a route:
{ path: "reporting/report/result", name: "reportResult", component: ResultTable, props: true }
And a router-link:
<router-link :to="{ name: 'reportResult', params: {reportId: 21, tableData: 'data'}}" target="_blank">{{ report.reportId }}</router-link>
But props are not passed to the child component. If use router-link without target="_blank" all works fine. Probably there is another way to open link in a new tab and pass props to it?
The router link params options doesn't pass your object in query, if you want pass your object, you must use the query args.
According to vue router docs
// named route
router.push({ name: 'user', params: { userId: 123 }})
// with query, resulting in /reportResult?reportId=21&tableData=data
router.push({ path: 'reportResult', query: {reportId: 21, tableData: 'data'}})
In you'r page, you access to your query with :
this.$route.query.reportId (or this.$route.params.reportId, I don't remember)
I have defined a router-link
<router-link :to="{ path: linkTo + '/' + item.name, params: { id: item.id } }" >{{item.name}}</router-link>
But when I inspect the router-link, the params object is always empty.
What i'm doing wrong? If I just output the id with {{item.id}} i get the number...
This is my route
{ path: '/category/:name', component: Category, props: true, name: 'category', meta: { auth: true } },
gregor
The dynamic segment specified in your route is "name", not the "id". This means your $route.params object doesn't have an "id" property and you can't access it with props in your child component.
You have either to change path in your route to path: '/category/:id' or change your router-link params to params: { name: item.id }. Don't forget to add props: ['id'] (or props: ['name']) in your child component.