Vue Router - missing param for named route eror

Question

My id is being successfully transferred to my URL but I'm not sure why I'm getting this error. I tried a method where I added a default params to my path: '*' but to no avail.

routes.js

{
  path: '/objective/employee/:id',
  name: 'employee-objective',
  component: () => import('@/views/EmployeeObjective'),
  meta: { requiresAuth: true }
},

Component

<template>
  <v-container>
    <p class="display-2 text-center">DASHBOARD</p>
    <p class="overline text-center">Current route is still under construction</p>

    <template v-for="employee in employees" >
      <v-row :key="employee.id">
        <v-col ><router-link :to="{ name: 'employee-objective', params: { id: employee.id }}">{{ employee.first_name }}</router-link></v-col>
      </v-row>
    </template>
    </v-container>
</template>

<script>
  export default {
    data: ()=> ({
      employees: []
    }),

    created () {
      this.employeeList ()
    },

    methods: {
      employeeList () {
        axios
        .get('/api/employees')
        .then(response => this.employees = response.data)
        .catch(error => console.log(error))
      }
    }
  }
</script>

I have now found the culprit. In my App.vue I have a navigation drawer that also has a router link to employee-objective without the params: { id: } now I have to figure out how to get the authenticated user id to be passed on the params: { id: //auth::user->id } — Jim E Russel
– Jim E Russel, Commented Jan 15, 2020 at 3:08

solis · Accepted Answer · 2020-01-14 09:13:31Z

1

Most likely your employee data is missing an id field.

Check these examples:

With id your example works as expected: employee with id
Without id you will see [vue-router] missing param for named route "employee-objective" in console: Expected "id" to be defined: employee without id

answered Jan 14, 2020 at 9:13

solis

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jim E Russel Over a year ago

I do have the id field in the database. But your codepen was amazing, I'll try to discover other things that are affecting the application with the help of your provided code.

Collectives™ on Stack Overflow

Vue Router - missing param for named route eror

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related