I'm working with vue router 4, I've got an error when I'm passing post id to post details page via router props, it
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop "destinationId". Expected Number with value 1, got String with value "1"
Now my questions is how can I pass the id as Integer? it's passing as String.
Here is my router file:
routes: [
{
path: '/',
name: 'HomeRoute',
component: HomeView
},
{
path: '/details/:slug/',
name: 'DestinationDetails',
component: () => import('../views/DestinationDetails.vue'),
props: route => ({...route.params , slug: route.params.slug}),
children: [
{
path: ':exprienceSlug',
name: 'experience.show',
component: () => import('../views/PlaceDetails.vue'),
props: route => ({...route.params,}),
},
]
},
{
path: '/:pathMatch(.*)*',
name: "NotFound",
component: () => import('../views/NotFound.vue'),
}
]
And Here is my Post file where form I'm passing the params via router-link tag
<router-link class="col-md-3"
v-for="experience in destination.experiences"
:key="experience.id"
:to="{name: 'experience.show', params: {exprienceSlug: experience.slug, destinationId: destination.id}}">
<PlacesCard :places="experience"/>
</router-link>
And this is post single page where I'm catching the id and fetch the posts.
props: {
destinationId: {
type: Number,
required: true,
default: 0,
},
exprienceSlug: {
type: String,
required: true,
},
},
computed: {
destination(){
return storeData.destinations.find(
destination => destination.id == this.destinationId
)
},
experience(){
return this.destination.experiences.find(
experience => experience.slug == this.exprienceSlug
)
}
},
route.params are of type string | string[].
But you can change that by parsing the params:
children: [
{
path: ':exprienceSlug',
name: 'experience.show',
component: () => import('../views/PlaceDetails.vue'),
props: ({ params }: Route) => ({
...route.params,
destinationId: Number(params.destinationId)
}),
},
]
I want to send data from home component via book.vue router link, but I am getting an error. Where am I doing wrong?
Home.vue
export default {
data() {
return {
data: {
attributes: {
name: 'Jonh',
age: '25',
},
},
}
},
}
router/index.js:
const routes = [
{ path: '/Library/:id', name: 'Book', component: Book, props: true },
]
navigation:
:to="{ name: 'Book', params: { id: book.id}, props: { data: data.attributes} }"
Book.vue
export default {
props: {
id: {
type: Array,
required: true
}
}
}
My application have navbar with back button. The navbarTop is a named views, so I can have different navbar for each route, and the navbar needs props backRoute.
I define the back route like this:
{
path: '/:id',
name: 'orders detail',
components: {
default: OrderDetail,
navbarTop: Navbar,
},
props: {
navbarTop: {
backRoute: { name: 'orders' },
title: 'Order Detail',
},
default: true,
},
},
{
path: '/:id/request-cancel',
name: 'orders request cancel',
components: {
default: OrderRequestCancel,
navbarTop: Navbar,
},
props: {
navbarTop: {
backRoute: { name: 'orders', params: {id: ???} }, // how to get the id here?
title: 'Request Cancel',
},
default: true,
},
},
Is it possible to get the id in route and pass it as prop to the component?
The NavbarTop is named view and is used in many routes, so I can't update the back route from OrderRequestCancel component.
We can use Function Mode
props: {
navbarTop: route => ({
backRoute: { name: 'order detail', params: { id: route.params.id } },
title: 'Request Cancel',
}),
default: true,
},
Thank you #Yom S. for the hint.
So I'm showing some bread-crumbs like so..
<router-link to="/" class="breadcrumb-item">Home</router-link>
<router-link :to="{name: 'provider-dashboard', params: { id: provider_id }}" class="breadcrumb-item">Provider Dashboard</router-link>
<router-link :to="{name: 'provider-account-dash', params: { provider_id: provider_id, id: account_id }}" class="breadcrumb-item">Account Dashboard</router-link>
<router-link :to="{name: 'resident-profile', params: { account_id: account_id, id: resident_id }}" class="breadcrumb-item">Resident Profile</router-link>
I'm setting the param values with computed props that look like so..
account_id: {
get() {
return this.$store.getters['AssessmentPlanForm/getAccountId'];
},
set(value) {
this.$store.dispatch('AssessmentPlanForm/setAccountId', value);
},
},
provider_id: {
get() {
return this.$store.getters['AssessmentPlanForm/getProviderId'];
},
set(value) {
this.$store.dispatch('AssessmentPlanForm/setProviderId', value);
}
},
resident_id: {
get() {
return this.$store.getters['AssessmentPlanForm/getResidentId'];
},
set(value) {
this.$store.dispatch('AssessmentPlanForm/setResidentId', value);
},
},
I have confirmed that the values of the computed properties are correct, however when I click the router-link breadcrumb to go to desired location, the url shows users/function%20Number() instead of say users/18.
Why is this occurring and how can I get vue-router to properly render the parameter set by computed-prop?
Update from 1st comment
Here are the getters & no I'm not doing that for these attributes.
getId: (state) => {
return state.id;
},
getProviderId: (state) => {
return state.provider_id;
},
getEmployeeId: (state) => {
return state.employee_id;
},
getAccountId: (state) => {
return state.account_id;
},
getResidentId: (state) => {
return state.resident_id;
},
getSlug: (state) => {
return state.slug;
},
Update from 2nd comment
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [{
path: "/",
name: "home",
component: Splash,
prop: true
},
{
path: "/about",
name: "about",
component: About,
prop: true,
},
{
path: "/contact",
name: "contact",
component: ContactUs,
prop: true,
},
{
path: "/pricing",
name: "pricing",
component: Pricing,
prop: true,
},
{
path: "/faq",
name: "faq",
component: Faq,
prop: true
},
{
path: "/polls",
name: "polls",
component: Polls,
prop: true
},
{
path: "/login",
name: "login",
component: Login,
prop: true
},
{
path: "/provider-signup",
name: "provider-signup",
component: ProviderSignup,
prop: true
},
{
path: "/provider-dashboard/:id",
name: "provider-dashboard",
component: ProviderDash,
prop: true
},
{
path: "/providers/:id/edit",
name: "edit-provider",
component: EditProvider,
prop: true
},
{
path: "/provider/:id/employee-invitation",
name: "employee-invitation",
component: ProviderEmployeeInvite,
prop: true
},
{
path: "/employee-signup",
name: "employee-signup",
component: EmployeeSignup,
prop: true
},
{
path: "/employee-dashboard/:id",
name: "employee-dashboard",
component: EmployeeDash,
prop: true
},
{
path: "/employees/:id/edit",
name: "edit-employee",
component: EditEmployee,
prop: true
},
{
path: "/provider/:provider_id/employees",
name: "employees",
component: Employees,
prop: true
},
{
path: "/provider/:provider_id/accounts/new",
name: "provider-account-signup",
component: ProviderAccountSignup,
prop: true
},
{
path: "/providers/:provider_id/accounts/:id",
name: "provider-account-dash",
component: ProviderAccountDash,
prop: true
},
{
path: "/providers/:provider_id/accounts/:account_id/edit",
name: "edit-provider-account",
component: EditProviderAccount,
prop: true
},
.
.
.
]
});
So the answer was to fix a User error on my part. I forgot to assign the values of those attributes in a page I was working on.
The answer was to load the values of these attributes #created
retrieve(context, record_id) {
let resident_id = router.currentRoute.params.resident_id;
Axios.get(`/residents/${resident_id}/assessment_plan_forms/${record_id}`, {
headers: {
'Authorization': 'Bearer ' + window.$cookies.get('access_token'),
'x-amz-acl': 'public-read'
}
})
.then((response) => {
// let current_user = response.data.locals.current_user;
let provider = response.data.locals.provider;
let resident = response.data.locals.resident;
let account = response.data.locals.account;
let pdf_url = response.data.locals.pdf_url;
let date_of_record = response.data.locals.date_of_record;
let assessment_plan_form = response.data.locals.assessment_plan_form;
context.dispatch('AssessmentPlanForm/setId', assessment_plan_form.id, {
root: true
})
context.dispatch('AssessmentPlanForm/setProviderId', provider.id, {
root: true
})
context.dispatch('AssessmentPlanForm/setAccountId', account.id, {
root: true
})
context.dispatch('AssessmentPlanForm/setResidentId', resident.id, {
root: true
});
context.dispatch('AssessmentPlanForm/setPdfUrl', pdf_url, {
root: true
});
context.dispatch('AssessmentPlanForm/setDateOfRecord', date_of_record, {
root: true
});
context.dispatch('AssessmentPlanForm/setResidentSignature', resident.full_name, {
root: true
});
// redirect to show page
router.push({
name: 'show-assessment-plan',
params: {
resident_id: resident.id,
id: record_id
}
})
})
.catch((error) => {
console.log(error);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
And #retrieve gets called in the Created hook like:
methods: {
loadAssessmentPlan() {
this.$store.dispatch('AssessmentPlanForm/retrieve', this.$route.params.id)
},
},
created() {
this.loadAssessmentPlan();
},
I have an issue.
I have a router like this with child.
{
component: () => import('#/components/roles/Index'),
path: '/roles',
name: 'roles.index',
meta: {
auth: true,
roles: ['admin']
},
children: [{
component: () => import('#/components/roles/Show'),
path: ':id',
name: 'roles.show',
meta: {
auth: true,
roles: ['admin']
}
}]}
When i click on button the url is changing but component is not loading.
<v-btn icon class="mx-0" :to="{ name: 'roles.show', params: { id: props.item.id }}">
<v-icon color="blue">info</v-icon>
</v-btn>
But when i do this like that everything work right
{
component: () => import('#/components/roles/Index'),
path: '/roles',
name: 'roles.index',
meta: {
auth: true,
roles: ['admin']
}
},
{
component: () => import('#/components/roles/Show'),
path: '/roles/:id',
name: 'roles.show',
meta: {
auth: true,
roles: ['admin']
}
}
Logically a path cannot contain param only. path: ':id' will match everything, which is problematic.