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>

Answer 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