如何点击用户并查看用户数据？

Question

我正在使用 VueJS 做一个项目，我需要以下内容：

使用 API 并获取主页中的用户列表。

当单击用户的按钮时，我需要重定向到另一个组件并在该组件中输出该用户的详细信息（仅我单击的用户的详细信息）。

这是显示用户信息的表格

 <v-data-table hide-actions flat :headers="headers" :items="doctors">
        <template v-slot:items="props">
          <td>{{ props.index + 1 }}</td>
          <td>{{ props.item.profile.full_name }}</td>
          <td>{{ props.item.email }}</td>
          <td>{{ props.item.username }}</td>
          <td>{{ props.item.updated_at }}</td>
         <td> 
          <v-btn outline small color="indigo" @click="view(props.item)">
                                <i class="fa fa-eye"></i> &nbsp; make payment
                            </v-btn>
         </td>


        </template>
        <template v-slot:no-results>
          <h6 class="grey--text">No data available</h6>
        </template>
      </v-data-table>

视图函数在方法中

 view() {
            window.open(`/finance/pay-doctors/${item.id}`, "_blank");
        },

我创建了一条动态路线

 { path: '/finance/pay-doctors/:id', component: DoctorDetails}

无法创建 DoctorDetails 并显示数据

Answer 1

我建议您首先尝试使用路由器推送。
因此请使用

<script>
export default {
    methods: {
        view(id) {
            this.$router.push({ path: `/finance/pay-doctors/${item.id}` })
        }
    }
}
</script>

确保您的路由器已正确设置 感谢您的 Vue 开发工具，您拥有正确的状态。

此外，请确保在 DoctorDetails 上有一些东西可以获取用户的数据。