laravel - 如何通过laravel axios将id从路由器从一个vue组件传递到另一个vue组件来获取数据

Question

Employee.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>

I am sending employee id from here to EmployeeDetails.vue by routes in app.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 文件，我通过API资源调用了路由

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

这是我的Controller EmployeeController.php，我在其中调用了返回数据的函数

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

But the problem is: Data is not showing and return a error message in my console. Error is given below. Actually I want How can I solve this error.

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

您在路由器链接中传递的ID似乎不正确。

它应该是 :

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