Как получить данные путем передачи идентификатора в маршрутизатор от одного vue компонента к другому vue компоненту через laravel axios

Question

Сотрудник. vue Компонент

<tr role="row" class="odd" v-for="(employee, index) in employees" :key="index">
   <td>{{ index+1 }}</td>
   <td><router-link :to="/employee-profile/+employee.id">{{ employee.name }}</router-link></td>
</tr>

Я отправляю сотрудника id отсюда в EmployeeDetails. vue по маршрутам в приложение. js

let routes = [
    { path: '/employee', component: require('./components/office/Employee.vue').default },
    { path: '/employee-details/:id', component: require('./components/office/EmployeeDetails').default },
]

Вот мой EmployeeDetails. vue компонент

<script>
    export default {
        data() {
            return {
                employees:{},
            }
        },
        mounted() {
            let id = this.$route.params.id

            axios.get('api/employee-details/'+id)
                  .then(response => {
                      this.employees = response.data;
                  });
        }
    }
</script>

Вот api. php файл, который я вызвал route через ресурсы API

Route::get('employee-details/{id}', 'API\EmployeeController@employeeDetails');

и вот мой Controller EmployeeController. php где я вызвал функцию для возвращаемых данных

public function employeeDetails($id)
{
   return DB::table('employees')->where('id', $id)->get(); 
}

Но проблема в том, что данные не отображаются и возвращают сообщение об ошибке в моей консоли . Ошибка приведена ниже. На самом деле я хочу, как я могу решить эту ошибку.

app.js:81221 [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"

found in

---> <EmployeeProfile> at resources/js/components/office/EmployeeProfile.vue
       <Root>
app.js:82484 TypeError: Cannot read property '0' of undefined

Answer 1

Кажется, что идентификатор, который вы передаете в ссылке маршрутизатора, неверен.

Это должно быть:

<router-link :to="`/employee-profile/${employee.id}`">{{ employee.name }}</router-link>