如何通过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>

我通过 app.js 中的路由将员工 id 从这里发送到 EmployeeDetails.vue p>

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 资源调用路由的 api.php 文件

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

这是我的控制器 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

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

应该是：

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