vue-router returns 'function%20%' in url instead of param

Question

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
    },

    .
    .
    .
  ]
});

I can't reproduce this in CodeSandbox ~ codesandbox.io/s/vuex-vue-router-base-ywslw. What do your store getters look like? You don't happen to be using method style access do you? — Phil
My guess would be that somewhere you've got something like provider_id: Number, either in your store state or in your component data. Unlike props, which can be defined this way to specify types, the properties for both state and data should just be set to their initial values. By writing provider_id: Number you're setting the initial value of the id to be the function Number. Of course, this is just educated speculation without seeing the relevant code. — skirtle
Thanks Phil, as I relooked everything over I realized I hadn't set those attributes in my axios request for a specific page. — sirramongabriel

sirramongabriel sirramongabriel · Accepted Answer · 2019-11-18T15:14:48

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();
  },

vue-router returns 'function%20%' in url instead of param

1 Answers